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

Posted 2023-02-22

【中文标题】Flux/Redux 在动作结束时触发副作用

【英文标题】：Flux/Redux trigger a side-effect at the end of an action

【发布时间】：2016-11-20 10:18:45

【问题描述】：

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

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

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

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

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

【参考方案1】：

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

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

  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 这是一种相当复杂的方法，但如果这是唯一想要做异步操作的实例，那么这里就包含了复杂性。在这种情况下，实现一个完整的异步通量流可能是矫枉过正的。

【讨论】：

谢谢，我认为该链接可以解决我的问题。我没有意识到我在描述一个异步问题。一旦我设法完成这项工作，我将验证答案。