Question

我无法理解如何在Flux / Redux中使用这样的模式：

组件Input在输入数据时触发操作;
组件Draw侦听store以获取一些长字符串;
根据这些字符串，它计算在画布中绘制的点的批次（在this.componentDidUpdate中）。为了不将所有点保存在内存中（假设它们的数量实际上太大），它会在循环中逐个绘制它们;
在此过程中，它会保存缩减形式的数据（点的分布）;
最后，我想使用简化数据进行另一个组件更新。

但是我不能在最后触发动作，因为它会无限地触发重新渲染。是否有一些推荐的方法来做到这一点？

我能想象的最好的方法是在我的reducer / action中绘制画布，并仅根据动作更新第二个组件的状态。但是如果它以某种方式重新渲染，那么画布将是空的。

我会使用setTimeout(, 0) hack和两个不同的商店，但它不能与Redux一起使用，因为所有商店都会收听同一商店。

Answer 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这是一种相当繁琐的方法，但如果这是唯一一个想要做异步的事情，那么这里就包含了很多东西。在这种情况下，实现全面的异步通量流可能是过度的。

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

1 个答案: