动作创建者

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 })

如果您想要处理结果，请不要忘记发送您的身份

并且在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，你没有这种奢侈，因为承诺缺乏这种行为。

Answer 2

如果您正在使用jquery ajax，您可以让您的动作创建者返回承诺，它将由调度函数返回，然后就可以中止它。这是一个例子：

动作创建者

function doSomething() {
  return (dispatch) => {
    return $.ajax(...).done(...).fail(...);
  }
}

您的组件

  componentDidMount(){
    this.previousPromise = this.props.dispatch(doSomething());
  }

  somefnct() {
    this.previousPromise.abort();
  }

Answer 3

我最近遇到了同样的问题，我不得不取消挂起或过时的异步redux操作。我通过创建一个cancel redux动作中间件来解决它。

在redux中，我们有中间件的概念。因此，当您发送请求时，它将通过一个中间件列表。一旦api响应，它的响应将在它到达redux store并最终到达你的UI之前通过一些中间件。

现在假设我们已经编写了一个取消中间件。 api请求将在启动时通过此中间件，当api响应时，api响应也将通过此中间件。

redux中的每个api请求都与一个动作相关联，每个动作都有一个类型和有效负载。

编写一个中间件，每当api请求完成时，都会存储相关的操作类型。除此之外，它还存储一个标志，指出是否放弃此操作。如果再次触发类似类型的操作，请将此标志设为true，表示放弃此操作。当api响应来自上一个操作，因为此api请求的discard标志已设置为true，因此从中间件发送null作为响应。

请查看此博客，了解有关此方法的详细信息。

https://tech.treebo.com/redux-middlewares-an-approach-to-cancel-redux-actions-7e08b51b83ce

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

3 个答案:

动作创建者

您的组件