Flux/Redux 在动作结束时触发副作用

Question

我不明白如何让这样的模式在 Flux/Redux 中工作：

一个组件Input在输入数据时触发一个动作；
组件 Draw 监听 store 以获取一些长字符串；
基于这些字符串，它计算出 lot 个点，并将其绘制在 canvas（在 this.componentDidUpdate 中）。为了不把所有的点都保存在内存中（假设它们的数量实在是太多了），它会一个一个地循环绘制；
在此过程中，它保存了数据的简化形式（点的分布）；
最后，我想使用减少的数据进行另一个组件更新。

但我无法在最后触发动作，因为它会无限触发重新渲染。有推荐的方法吗？

我能想到的最好的办法是在我的 reducer/action 中利用 canvas，并仅更新第二个组件的状态作为操作的结果。但是如果以其他方式重新渲染它，canvas 将是空的。

在不断变化的情况下，我会使用 setTimeout(, 0) hack 和两个不同的商店，但它不适用于 Redux，因为所有人都听同一个商店。

Answer 1

如果你正在做很多异步的事情，那么有很多 redux 异步库和 well documented approaches。但是，如果这是您的应用程序中唯一需要等待其他内容完成的部分，我可能会建议在商店中设置 DATA_PROCESSING_STATUS 之类的状态。第一次获取新数据时，将其设置为 "processing"，完成后，调度另一个事件将状态设置为 "done"。

然后在您的第二个组件中，对更改做出反应。

  componentWillReceiveProps(newProps) {
    const wasProcessing = this.props.DATA_PROCESSING_STATUS === 'PROCESSING';
    const isNowNotProcessing = newProps.DATA_PROCESSING_STATUS !== 'PROCESSING';
    if (wasProcessing && isNowNotProcessing) {
      // new data is ready, use it in some way
    }
  }

IMO 这是一种相当繁琐的方法，但如果这是想要执行异步操作的唯一实例，那么繁琐就包含在这里。在这种情况下，实施完整的异步通量流可能有点矫枉过正。

Flux/Redux 在动作结束时触发副作用

Flux/Redux trigger a side-effect at the end of an action

reactjs

redux

flux

reactjs-flux

react-redux