通过 React-Redux 进行地理定位
Posted
技术标签:
【中文标题】通过 React-Redux 进行地理定位【英文标题】:Geolocation through 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 【参考方案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'));
);
);
;
【讨论】:
以上是关于通过 React-Redux 进行地理定位的主要内容,如果未能解决你的问题,请参考以下文章