Question

考虑以下情况：

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

然而，其他行动仍有待解决/拒绝，并将破坏清洁状态。目标是在调用clearState动作创建者时中断此（并且最好是许多其他）挂起的异步操作。无论如何，AFAIK，未决承诺应该以任何方式解决/回应。

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

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

Answer 1

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

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

在我的动作创作者中，我有类似的东西：

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操作。我通过创建一个cancel redux动作中间件来解决它。

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

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

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

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