reactjs - 使用 redux-thunk 取消之前的异步操作

Question

我正在使用 redux-thunk 中间件构建一个 React/Redux 应用程序来创建和处理 Ajax 请求。我有一个经常触发的特定 thunk，我想在触发新请求之前取消任何先前启动的 Ajax 请求。这可能吗？

Answer 1

一种方法是通过为这些请求提供随机 ID 并在处理结果之前检查其状态来将这些请求标记为已取消。

执行此操作的方法是在第一次调度(在 thunk 内)中为此调用分配随机 id，并在处理结果之前在 reducer 中检查它。

const actionId = Math.random();
dispatch({type: AJAX_LOAD_CONST, id:actionId })

当你想取消所有请求时使用

dispatch({type:HANDLE_AJAX_RESPONSE, id:actionId, results: json })

当您想要处理结果时，请不要忘记发送您的 ID

在 reducer 中有这样的东西:

function reducer(state = initialState, action) {
  switch (action.type) {
    case actions.AJAX_LOAD_CONST:
      return Object.assign({}, state, { ajax: state.ajax.concat(action.id) });
    case actions.CANCEL_ALL_AJAX:
      return Object.assign({}, state, { ajax: [] });
    case actions.HANDLE_AJAX_RESPONSE:
      if (state.ajax.includes(action.id) {
        //return state reduced with action.results here
      }
      return state;
  }
}

如果您使用 XMLHttpRequest 或其包装器之一(JQuery？)，您还可以存储请求本身并调用 request.abort()。如果您使用新的 fetch api，您就没有这种奢侈，因为 Promise 缺乏这种行为。