我在 redux 中使用相同的表单和相同的状态进行添加和编辑。当我调用 api 获取数据进行编辑时,我们更改路由器以在响应到达之前添加表单。所有表单数据都将自动填充以添加项目,因为我使用相同的状态进行添加和编辑。有什么办法可以防止这种情况发生吗?
我的 Action 创造者:
fetchById: function (entity, id) {
return function (dispatch) {
dispatch(apiActions.apiRequest(entity));
return (apiUtil.fetchById(entity, id).then(function (response) {
dispatch(apiActions.apiResponse(entity));
dispatch(actions.selectItem(entity, response.body));
}
}
}
由于响应较晚,因此 selectItem 的调度较晚。当我打开添加项目的表单时,此表单会填入来自响应的数据。
最佳答案
Thunk 将 dispatch
和 getState
作为参数。
如果您将当前路线保留在您所在州的某处,您可以在 API 回调中检查您是否仍在使用 getState().routing.path
或类似内容的同一页面上,并且 return
如果它在 API 调用开始后发生了变化。
如果你不保持当前路线的状态,你可以改为阅读this.context.router
在你的组件中(不要忘记定义 contextTypes
来获取它!)并将它传递给 action creator。然后 Action 创建者可以使用 router.isActive()
检查请求前后我们是否仍在同一条路径上。
最后,您可以不使用相同的状态来编辑和添加项目。你的状态形状可以看起来像 { drafts: { newItem: ..., 1: ..., 2: ... } }
你可以在 drafts 中保留“添加”形式.newItem
,并保留相应实体ID的任何“编辑”表单。这样他们就永远不会互相覆盖,并且作为奖励,可以保留正在进行的编辑,例如如果您按“返回”然后再次转到表单(当然取决于您是否希望在您的用户体验中使用它)。
关于javascript - 我们可以在更改 react router 时取消 api 响应吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36636626/