通过React-Redux进行地理位置定位

Question

我试图更好地了解redux并做出响应的生命周期方法。

我在组件上安装了prop函数，并在redux中调用了函数。在redux上，我正在调用位置以获取位置并设置初始状态，并在进行调用时对其进行更新。我能够得到该职位，但是无论我通过redux进行了什么尝试，我的坐标（初始状态）仍然是未定义的。我在componentDidMount函数上尝试了.then（），并在本地设置状态，这可行。但是我想将此功能与redux一起使用，以尝试更好地理解它。我的理解是，只要存在初始状态，更新它就不会有问题。但是我觉得我的问题可能出在我的action.payload上。因为在我的切换案例中没有为GET_LOCATION记录任何内容。值得注意的是，我在控制台上收到黄色警告，[违规]仅根据用户手势请求地理位置信息。我不确定这是否会影响任何事情。无论如何，任何建议将不胜感激。我一直在寻找高点和低点，以找到通过redux进行地理位置定位的好方法。这是代码：

const initialState = {
    coords: { }
};


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

};

切换语句：

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

Answer 1

geolocation.getCurrentPosition 是异步的，因此它不会返回任何要放入有效负载的内容。

您需要使用redux-thunk异步分发。如果您从未使用过它，请按照说明进行设置，这样就可以更改动作创建者了：

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