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

Question

我正在努力更好地理解 redux 和 React 生命周期方法。

我在组件 did mount 上有一个 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异步调度。如果您从未使用过它，请按照说明进行设置，然后您应该能够像这样更改您的 action creator:

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