Geolocation through React-Redux

Question

I am trying to get a better understanding of redux and react lifecycle method.

I have a prop function on component did mount that calls a function in redux. On redux I am calling the location to get the position and setting the initial state and updating it when the call gets made. I am able to get the position but no matter what I've tried through redux, my coords(initial state) still comes out as undefined. I tried a .then() on the componentDidMount function and set state locally and this worked. But I would like to use this feature with redux to try and get a better understanding of it. My understanding is that as long as there is an initial state, there should not be a problem in updating it. But I feel that my problem may be somewhere with my action.payload. As it is not logging anything in my switch case for GET_LOCATION. One thing of note, i get a yellow warning on my console, '[Violation] Only request geolocation information in response to a user gesture.' I am not sure if this impacts anything. Anyways, any suggestions would be vastly appreciated. I've searched high and low for a nice solution to geolocation through redux. Here is the code:

const initialState = {
    coords: { }
};


export function getLocation() {
    const geolocation = navigator.geolocation;
          return {
             type: GET_LOCATION,
             payload: geolocation.getCurrentPosition((position) => {
                 console.log(position.coords)
                 return position
             })
         }

};

Switch Statement:

case GET_LOCATION:
    console.log(GET_LOCATION)
        return Object.assign({},
            state,
            {
                coords: action.payload
            }
        )

Answer 1

geolocation.getCurrentPosition is asynchronous, so it's not returning anything to put in payload.

You need to use redux-thunk to dispatch asynchronously. Follow the instructions to set it up if you've never used it, then you should be able to change your action creator like this:

export function getLocation() {
    return dispatch => {
        const geolocation = navigator.geolocation;
        geolocation.getCurrentPosition((position) => {
            console.log(position.coords);
            dispatch({
                type: GET_LOCATION,
                payload: position
            });
        });
};