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

How to to cancel pending asynchronous actions in React/Redux

本文关键字：Redux 挂起 异步操作 React 何取消 取消      更新时间：2023-09-26

考虑以下情况：

当用户导航到页面时，会调度两个异步Redux操作来并行获取两组相关数据。如果这些获取中的任何一个失败，它将被组件检测到，组件将在下一个循环中呈现错误组件，然后在安装时分派clearState操作。

但是，其他操作仍有待解决/拒绝，并且会破坏干净状态。目标是在调用clearState操作创建者时，中断此（最好是许多其他）挂起的异步操作。AFAIK，未决承诺应以任何方式解决/响应，无论发生什么。

我想到的第一件事是向每个reducer引入INTERRUPTED标志，但我无法理解如何使用它来使以下SUCCESS/ERROR操作不影响/返回默认状态。

如何做到这一点，将复杂性降至最低？

我也遇到过类似的问题，我使用jquery进行ajax请求和redux-thunk中间件。

解决方案是让你的动作创建者返回承诺，这个承诺将由调度函数返回，然后你就可以中止它。

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

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

然后在我的组件中，我有：

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

也可以看看丹·阿布拉莫夫的评论。

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

在redux中，我们有中间件的概念。因此，当你发送请求时，它会经过一个中间件列表。一旦api做出响应，它的响应将在到达redux存储并最终到达UI之前通过许多中间件。

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

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

编写一个中间件，每当完成api请求时，该中间件都会存储关联的操作类型。它还存储了一个标志，说明是否放弃此操作。如果再次触发类似类型的操作，则使此标志为true，表示放弃此操作。由于此api请求的丢弃标志已设置为true，当上一个操作的api响应到来时，从中间件发送null作为响应。

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

相关文章：