我们可以在更换路由器时取消api响应吗?

Bis*_*tha 6 javascript reactjs react-router redux

我在redux中使用相同的形式和相同的状态来添加和编辑.当我调用api获取数据进行编辑时,我们更改路由器以在响应到达之前添加表单.所有表单数据都将自动填充以添加项目,因为我使用相同的状态进行添加和编辑.有没有办法防止这种情况发生?

我的动作创作者:

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));
            } 
       }
}
Run Code Online (Sandbox Code Playgroud)

由于响应较晚,因此selectItem会延迟发送.当我打开表单添加项目时,此表单将填充响应中的此数据.

Dan*_*mov 4

谢谢,两者dispatch兼而有之getState作为参数。

\n\n

如果您将当前路线保留在您所在州的某个位置,您可以在 API 回调中检查您\xe2\x80\x99 是否仍在同一页面上getState().routing.path或类似的内容,并且return自 API 调用开始以来是否已更改。

\n\n

如果您不将当前路由保留在状态中,则可以改为读取this.context.router组件(不要忘记定义contextTypes来获取它!)并将其传递给操作创建者。然后动作创建者可以使用router.isActive()检查 we\xe2\x80\x99 在请求之前和之后是否仍在同一路径上。

\n\n

最后,您不能使用相同的状态来编辑和添加项目。您的状态形状可能看起来像这样{ drafts: { newItem: ..., 1: ..., 2: ... } },您可以将 \xe2\x80\x9cadd\xe2\x80\x9d 形式保留在drafts.newItem,并通过相应的实体\xe2\x80 保留任何 \xe2\x80\x9cedit\xe2\x80\x9d 形式\x99s ID。这样它们就永远不会互相覆盖,并且作为奖励,可以保留正在进行的编辑,例如,如果您按 \xe2\x80\x9cBack\xe2\x80\x9d 然后再次转到表单(取决于您是否当然希望你的用户体验中有这个)。

\n