Нанесение маркеров на карту с использованием response-native-maps - PullRequest
Новая
       70

Нанесение маркеров на карту с использованием response-native-maps

0 голосов
/ 29 августа 2018

Короче говоря, я пытаюсь нанести маркеры на карту с помощью response-native-maps.

Я дошел до создания действия для извлечения координат и соответствующего идентификатора с сервера (см. Код ниже). 

export const getPlacesOnMap = () => {
return dispatch => {
    dispatch(authGetToken())
        .then(token => {
            return fetch("myApp?auth=" + token);
        })
        .catch(() => {
            alert("No valid token found!");
        })
        .then(res => {
            if (res.ok) {
                return res.json();
            } else {
                throw(new Error());
            }
        })
        .then(parsedRes => {
            const places = [];
            for (let key in parsedRes) {
                places.push({
                    // ...parsedRes[key], // this fetches all the data
                    latitude: parsedRes[key].location.latitude,
                    longitude: parsedRes[key].location.longitude,
                    id: key
                  });
                } console.log(places)
                dispatch(mapPlaces(places));
              })
        .catch(err => {
            alert("Oops! Something went wrong, sorry! :/");
            console.log(err);
        });
    };
};


export const mapPlaces = places => {
return {
    type: MAP_PLACES,
    places: places
 };
};

Я не знаю, правильно ли я использую слова, но я по существу протестировал код (выше) с помощью componentWillMount (), и он успешно возвратил несколько координат в виде массива объектов.

Теперь проблема в том, что я не знаю, что делать дальше. Насколько я понимаю, я знаю, что конечной целью является создание setState (). Но я не знаю, как туда добраться.

Было бы очень полезно, если бы кто-то указал мне правильное направление.

1 Ответ

0 голосов
/ 29 августа 2018

Вам необходимо создать асинхронное действие. Вы можете отправлять различные действия внутри асинхронного действия в зависимости от того, разрешена или отклонена внутри них асинхронная функция. 

export function getPlacesOnMap(token) {
    return async function(dispatch) {
        dispatch({
            type: "FETCHING_PLACES_PENDING"
        });
        fetch("myApp?auth=" + token)
        .then(res => {
            dispatch({
                type: "FETCHING_PLACES_FULFILLED",
                payload: res.json()
            });
        })
        .catch(error => {
            dispatch({
                type: "FETCHING_PLACES_REJECTED",
                payload: error
            });
        });
    };
}

Если ваша функция authGetToken () также является обещанием, вам необходимо отправить это действие после разрешения authGetToken (). Вы можете использовать action.payload в вашем случае "FETCHING_PLACES_FULFILLED" ваших редукторов, чтобы иметь возможность использовать извлеченные данные.

UPDATE

Ваш редуктор должен быть таким: 

export default function reducer(
    state = {
        loadingMarkers : false,
        markers : [],
        error : null,
    },
    action
) {
    switch (action.type) {
        case "FETCHING_PLACES_PENDING":
            return { ...state, loadingMarkers: true };
        case "FETCHING_PLACES_FULFILLED":
            return { ...state, loadingMarkers: false, markers: action.payload};
        case "FETCHING_PLACES_REJECTED":
            return { ...state, loadingMarkers: false, error: action.payload };
        default:
            return state;
    }
}

Теперь вы можете подключить свой компонент к приставке и использовать маркеры при их получении.

посмотрите на этот пример и подключите документы

...