使用react-native-maps在地图上绘制标记

Question

In short, I'm trying to plot markers on a map using react-native-maps.

I've gone as far as creating an action to fetch the coordinates and respective ID from the server (see code below).

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
 };
};

I don't know if I'm using the right words, but I've essentially tested the code (above) using componentWillMount(), and it successfully returned multiple coordinates as an array of objects.

Now, the problem is I don't know what to do next. As much as I understand, I know the end goal is to create a setState(). But I don't know how to get there.

Would be a great help if someone can point me in the right direction.

Answer 1

You need to create an async action. You can dispatch different actions inside an async action based on whether the async function inside it is resolved or rejected.

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
            });
        });
    };
}

If your authGetToken() function is also a promise, you need to dispatch this action after authGetToken() was resolved. You can use the action.payload in your "FETCHING_PLACES_FULFILLED" case of your reducer(s) to be able to use the retrieved data.

UPDATE

Your reducer should be like this:

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;
    }
}

Now you can connect your component to redux and use your markers when they are fetched.

have a look at this example and connect docs