如何在 React/Redux 中取消挂起的异步操作

Question

考虑以下情况：

当用户导航到页面时，会调度两个异步 Redux 操作以并行获取两组相关数据。如果这些获取中的任何一个失败，组件将检测到它，该组件将在下一个周期呈现错误组件，进而在挂载时调度 clearState 操作。

但是，其他操作仍有待解决/拒绝，并且会破坏干净状态。目标是在调用clearState 动作创建者时中断这个（最好是许多其他）未决异步动作。 AFAIK，未决的承诺无论如何都应该解决/响应。

我想到的第一件事是向每个减速器引入 INTERRUPTED 标志，但我不知道如何使用它来使以下 SUCCESS/ERROR 动作不影响/返回默认状态。

如何做到这一点，将复杂性保持在最低限度？

Answer 1

我遇到了类似的问题，我正在使用 jquery 来发出 ajax 请求和 redux-thunk 中间件。

解决办法是让你的action creators返回promise，这个promise会被dispatch函数返回，然后你就可以中止它了。

在我的动作创建器中，我有这样的东西：

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

然后在我的组件中：

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

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

还可以看看 Dan Abramov 的 comment。

Answer 2

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

在 redux 中，我们有中间件的概念。因此，当您发送请求时，它将通过中间件列表。一旦 api 响应，它的响应将通过许多中间件，然后到达 redux 存储并最终到达您的 UI。

现在假设我们已经编写了一个取消中间件。 api请求发起时会经过这个中间件，api响应时api响应也会经过这个中间件。

redux 中的每个 api 请求都关联一个 action，每个 action 都有一个 type 和一个 payload。

编写一个中间件，每当一个 api 请求完成时，它都会存储相关的动作类型。与它一起，它存储一个标志，说明是否放弃此操作。如果再次触发类似类型的操作，请将此标志设为 true，表示丢弃此操作。由于此 api 请求的丢弃标志已设置为 true，因此当上一个操作的 api 响应出现时，从中间件发送 null 作为响应。

查看此博客以获取有关此方法的详细信息。 https://tech.treebo.com/redux-middlewares-an-approach-to-cancel-redux-actions-7e08b51b83ce