LifeSports Application(ReactNative & Nest.js) - 15. map-service(3)

#1 mapsモジュール

map-serviceは、mapデータをロードするために5つのエンドポイントを作成します.このうち4つのエンドポイントはマッピングリストをロードするためのREST APIであり,MapRidexモジュールではこのAPIとともにマッピングリストの状態化を実現する.

./src.lib/api/maps.js

import { takeLatest } from 'redux-saga/effects';
import { createAction, handleActions } from "redux-actions";
import createRequestSaga, { createRequestActionTypes } from "../lib/createRequestSaga";
import * as mapsAPI from '../lib/api/maps';

const [
    LIST_MAPS_ALL,
    LIST_MAPS_ALL_SUCCESS,
    LIST_MAPS_ALL_FAILURE,
] = createRequestActionTypes('maps/LIST_MAPS_ALL');

const [
    LIST_MAPS_TYPE,
    LIST_MAPS_TYPE_SUCCESS,
    LIST_MAPS_TYPE_FAILURE
] = createRequestActionTypes('maps/LIST_MAPS_TYPE');

const [
    LIST_MAPS_GU,
    LIST_MAPS_GU_SUCCESS,
    LIST_MAPS_GU_FAILURE
] = createRequestActionTypes('maps/LIST_MAPS_GU');

const [
    LIST_MAPS_GU_TYPE,
    LIST_MAPS_GU_TYPE_SUCCESS,
    LIST_MAPS_GU_TYPE_FAILURE
] = createRequestActionTypes('maps/LIST_MAPS_GU_TYPE');

export const listAll = createAction(LIST_MAPS_ALL);
export const listType = createAction(LIST_MAPS_TYPE, type_nm => type_nm);
export const listGu = createAction(LIST_MAPS_GU, gu_nm => gu_nm);
export const listGuType = createAction(LIST_MAPS_GU_TYPE, ({
    gu,
    type
}) => ({
    gu,
    type
}));

export const listAllSaga = createRequestSaga(LIST_MAPS_ALL, mapsAPI.getAll);
export const listTypeSaga = createRequestSaga(LIST_MAPS_TYPE, mapsAPI.getListByType);
export const listGuSaga = createRequestSaga(LIST_MAPS_GU, mapsAPI.getListByGu);
export const listGuTypeSaga = createRequestSaga(LIST_MAPS_GU_TYPE, mapsAPI.getListByGuType);

export function* mapsSaga() {
    yield takeLatest(LIST_MAPS_ALL, listAllSaga);
    yield takeLatest(LIST_MAPS_TYPE, listTypeSaga);
    yield takeLatest(LIST_MAPS_GU, listGuSaga);
    yield takeLatest(LIST_MAPS_GU_TYPE, listGuTypeSaga);
}

const initialState = {
    maps: null,
    error: null,
};

const maps = handleActions(
    {
        [LIST_MAPS_ALL_SUCCESS]: (state, { payload: maps }) => ({
            ...state,
            maps,
        }),
        [LIST_MAPS_ALL_FAILURE]: (state, { payload: error }) => ({
            ...state,
            error,
        }),
        [LIST_MAPS_TYPE_SUCCESS]: (state, { payload: maps }) => ({
            ...state,
            maps,
        }),
        [LIST_MAPS_TYPE_FAILURE]: (state, { payload: error }) => ({
            ...state,
            error,
        }),
        [LIST_MAPS_GU_SUCCESS]: (state, { payload: maps }) => ({
            ...state,
            maps,
        }),
        [LIST_MAPS_GU_FAILURE]: (state, { payload: error }) => ({
            ...state,
            error,
        }),
        [LIST_MAPS_GU_TYPE_SUCCESS]: (state, { payload: maps }) => ({
            ...state,
            maps,
        }),
        [LIST_MAPS_GU_TYPE_FAILURE]: (state, { payload: error }) => ({
            ...state,
            error,
        }),
    },
    initialState,
);

export default maps;

./src/modules/index.js

import { combineReducers } from "redux";
import { all } from "redux-saga/effects";
import auth, { authSaga } from './auth';
import loading from "./loading";
import user, { userSaga } from "./user";
import marker from './marker';
import map from "./map";
import maps, { mapsSaga } from "./maps";

const rootReducer = combineReducers({
    auth,
    loading,
    user,
    marker,
    map,
    maps
});

export function* rootSaga() {
    yield all([
        authSaga(),
        userSaga(),
        mapsSaga(),
    ]);
};

export default rootReducer;

4つのREST APIのモジュールが作成されました.4つのAPIは、以下の場合に使用されます.
1)listAllSaga:地図ナビゲーションからすべてのデータをロードします.
2)listTypeSaga:ホームページでモーションカテゴリ別のアイコンをクリックした場合に使用します.
3)listGuSaga:後で作成するホームページの「地域別」をクリックします.
4)listGuTypeSaga:マッピングナビゲーションは、後で作成するメインカテゴリタブとサブカテゴリタブで使用されます.
まず,1)の機能から始め,うまく機能しているかを確認する.

#2 mapsモジュールバインド

http://localhost:1337道。に入り、wayfing-serviceとmap-serviceをAPIゲートウェイにバインドします.

./src/pages/map/components/NaverMap.js

import React, { useEffect } from 'react';
import { StyleSheet } from 'react-native';
import NaverMapView from 'react-native-nmap';
import CustomMarker from './CustomMarker';
import { useDispatch, useSelector } from 'react-redux';
import { listAll } from '../../../modules/maps';

const NaverMap = () => {
    const { 
        visible,
        maps,
        error
    } = useSelector(({ 
        marker,
        maps,
    }) => ({ 
        visible: marker.visible,
        maps: maps.maps,
        error: maps.error,
    }));
    const dispatch = useDispatch();
    const defaultLocation = {
        latitude: 37.6009735, 
        longitude: 126.9484764
    };
    
    useEffect(() => {
        dispatch(listAll());

        if(error) {
            console.log(error)
        }
    }, [dispatch, error]);

    return(
        <NaverMapView style={ 
                          visible ? 
                          styles.openInfoContainer :
                          styles.closeInfoContainer
                      }
                      showsMyLocationButton={ true }
                      center={{
                          ...defaultLocation,
                          zoom: 15,
                      }}
                      scaleBar={ true }
        >
            {
                maps &&
                maps.map(
                    (map, i) => {
                        return <CustomMarker key={ i }
                                             data={ map } 
                               />
                    }
                )
            }
        </NaverMapView>
    );
};

const styles = StyleSheet.create({
    openInfoContainer: {
        width: '100%',
        height: '60%'
    },
    closeInfoContainer: {
        width: '100%',
        height: '90%',
    },
});

export default NaverMap;

NaverMapをレンダリングすると、listallメソッドを呼び出してデータ全体をインポートします.

#3 mapsテスト

listallメソッドがうまく呼び出されると、mapsステータス値にマッピングデータが含まれなければならないため、デバッガをチェックします.

state値がいいです.

state値を取得しmap apiに分散します.
テスト結果はマッピングデータのインポート効果が良好であることを示した.次の記事では、戴冠の詳細ページも作成します.