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

IT技术 javascript ajax asynchronous reactjs redux
2021-04-25 23:44:00

考虑以下情况:

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

然而,另一个动作仍然有待解决/拒绝,并且会破坏干净状态。目标是在clearState调用动作创建者时中断此(最好是许多其他)挂起的异步动作AFAIK,无论如何,待定的Promise都应该解决/响应。

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

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

2个回答

我有一个类似的问题,我使用 jquery 来制作 ajax 请求和 redux-thunk 中间件。

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

在我的动作创建者中,我有这样的事情:

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

然后在我的组件中,我有:

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

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

也可以看看Dan Abramov 的这个评论

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

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

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

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

编写一个中间件,每当完成 api 请求时,它都会存储关联的操作类型。连同它,它存储一个标志,表明是否放弃这个动作。如果再次触发类似类型的操作,则将此标志设为真,表示放弃此操作。由于此 api 请求的丢弃标志已设置为 true,当 api 响应针对前一个操作到来时,发送 null 作为来自中间件的响应。

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