当react路由器更改时，我们可以取消api响应吗

Can we cancel out api response when the react router is changed?

本文关键字：取消 api 响应 我们 路由器 react      更新时间：2024-06-29

我在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));
            } 
       }
}

由于响应延迟，那么selectItem将延迟发送。当我打开表单添加项目时，这个表单会填充来自响应的数据。

Thunks同时获取dispatch和getState作为参数。

如果您将当前路由保留在您的状态中，则可以在API回调中检查您是否仍与getState().routing.path或类似内容在同一页面上，以及return是否在API调用启动后发生了更改。

如果不保持当前路由的状态，则可以读取组件中的this.context.router（不要忘记定义contextTypes来获取它！）并将其传递给操作创建者。然后，动作创建者可以使用router.isActive()来检查我们在请求前后是否仍在同一路径上。

最后，您可以而不是使用相同的状态来编辑和添加项目。您的状态形状可以看起来像{ drafts: { newItem: ..., 1: ..., 2: ... } }，您可以将"添加"表单保留在drafts.newItem中，并根据相应实体的ID保留任何"编辑"表单。这样，它们就不会相互覆盖，而且，作为奖励，可以保留正在进行的编辑，例如，如果您按"上一步"，然后再次转到该表单（当然，这取决于您是否希望在用户体验中这样做）。

前几天我看到了这篇博客文章，我想第二部分描述了你在寻找什么。您不一定要取消请求，而是忽略响应。

基本上，您想要创建一个外部reducer，它将跟踪您对具有唯一id的服务器的异步请求。只有当请求id在列表中时，才允许它进入子减速器。

当您切换页面时，您将希望清除此唯一ID列表。

直接从博客上获得：

const initialState = [];
function update(state = initialState, action) {
  const { seqId } = action;
  if (action.type === constants.UNLOAD) {
    return initialState;
  }
  else if (seqId) {
    let newState;
    if (action.status === 'start') {
      newState = [...state, seqId];
    }
    else if (action.status === 'error' || action.status === 'done') {
      newState = state.filter(id => id !== seqId);
    }
    return newState;
  }
  return state;
}

然后限制子减速器：

let store = createStore((state, action) => {
  if (action.seqId &&
      (action.status === 'done' || action.status === 'error') &&
      state &&
      state.asyncRequests.indexOf(action.seqId) === -1) {
    return state;
  }
  return reducer(state, action);
});

为此向詹姆斯大声疾呼。真的很好的解决方案，在他的博客文章中解释得很好。

相关文章：