通过 React-Redux 进行地理定位答案

【问题标题】：Geolocation through React-Redux通过 React-Redux 进行地理定位
【发布时间】：2017-12-03 06:11:53
【问题描述】：

我正在尝试更好地了解 redux 和 react 生命周期方法。

我在组件上安装了一个 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
            }
        )

【问题讨论】：

需要更多代码才能理解。你可以添加一个最小的运行 sn-p

标签： javascript reactjs redux geolocation react-redux

【解决方案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
            });
        });
};

【讨论】：

您将如何对此进行错误处理？我了解您已将位置转换为调度函数，因为它需要一个函数才能成功回调。
getCurrentPosition() 采用第二个参数，即错误回调。在那里，您可以使用 GET_LOCATION_FAILED 等不同类型进行另一个调度。然后在 reducer switch 语句中，你会有另一个 GET_LOCATION_FAILED 的情况，并在那里做你需要做的任何事情。
非常感谢。我设法弄清楚如何实现它export const getGeolocation = () => async dispatch => { const geolocation = navigator.geolocation; geolocation.getCurrentPosition( position => { dispatch({ type: GET_GEOLOCATION, payload: position.coords }); }, error => { if (error.code === 1) { dispatch({ type: GEOLOCATION_DENIED, payload: false }); } } ); };

【解决方案2】：

有类似的问题，即使我可以 console.log 承诺成功案例中的坐标，我也无法让状态更新。您需要将承诺嵌套在动作创建者的函数中。这允许您在 resolve 案例中调用 dispatch 函数，将数据与数据异步分派到 reducer。见下文：

export const location = () => {
    return function (dispatch) {
        return new Promise((resolve, reject) => {
            if (!navigator.geolocation) {
                reject(new Error('Not Supported'));
            }
            navigator.geolocation.getCurrentPosition((position) => {
                var action = {
                    type: FETCH_LOCATION,
                    payload: {
                        lat: position.coords.latitude,
                        long: position.coords.longitude,
                        time: position.timestamp
                    }
                }
                resolve(position);
                dispatch(action)
            }, () => {
                reject(new Error('Permission denied'));
            });
        });
    }
};

【讨论】：