javascript - 我们可以在更改 react router 时取消 api 响应吗？

Question

我在 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 的调度较晚。当我打开添加项目的表单时，此表单会填入来自响应的数据。

Answer 1

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的任何“编辑”表单。这样他们就永远不会互相覆盖，并且作为奖励，可以保留正在进行的编辑，例如如果您按“返回”然后再次转到表单(当然取决于您是否希望在您的用户体验中使用它)。