Flux - 如何处理多个商店更新相同的视图？

Question

我是助推器模型的初学者，但我认为我在高层次上理解它：

活动创建者 - ＆gt;事件 - ＆gt;发送 - ＆gt;商店 - ＆gt;我们去看看周围！

鉴于flux模型支持多个商店，如果你说一个事件循环分派到2个以上的商店，那么反过来会更新相同的视图。

如何管理来自该过程的任何无意的闪烁？

我还没有完全启用/使用反应（我假设一个问题就是反应将处理这个减轻这个重要部分的反应）但从概念上讲，它如何在特定实现之外工作。

由于商店更改是在商店之间连续应用的，您是否只是等到所有商店都关闭处理调度程序，然后允许它们单独启动所有更改？即便如此，您仍然会在最后循环并调度事件，并且您仍然可能会对UI进行重叠更新。

谢谢！

Answer 1

您有不同的选择：

vanilla解决方案是在商店结构中使用waitFor()函数，并确保最终每个组件只有一个侦听的商店。或多或少是这样的：

需要注意的是，您的操作类型和存储结构需要同步：每个操作都需要与waitFor周期中包含的所有存储进行通信。图片中的示例将无法触发渲染。最顶级的商店没有收听调度员的操作，正确的商店将继续等待更新。此外，如果只有一个组件，红线可能会导致类似的死胡同。我处理这个问题的方法是：让第一行中的所有商店都听取所有操作，如果操作无关紧要：发出更改。

另一种选择是将您的数据合并到一个商店。 这不会使问题消失：您需要处理单个商店内的依赖性问题。但它确实消除了许多行为的麻烦，许多等待，以及许多改变排放......

Answer 2

请记住，操作是同步处理的 - 所有存储都会发出，控制器视图会调用setState等，然后堆栈展开并且浏览器有机会重新渲染DOM，因此无法进行闪烁（浏览器不会在函数运行的中间呈现，因为否则所有DOM操作代码都会导致随机闪烁。）

然而，正如您所说，可能会有多个商​​店发出更改，并且多个组件会监听它们，因此您最终可能会多次调用“setState”（即使在同一个组件上）。这听起来效率低下，但在大多数情况下并非如此。只要当前操作源自来自React的事件（例如，添加到JSX中的组件的事件处理程序），React会自动批处理对setState的所有调用，并且仅重新呈现给DOM（即任何所需的DOM）在完成事件处理后立即（和同步）更新一次。

有一种情况需要注意 - 如果你从一个React事件处理程序之外的东西派遣一个动作（例如一个promise.then，一个AJAX回调，setTimeout回调等），那么React将不得不重新渲染对于该函数中每次调用setState，因为它不知道何时执行它。您可以通过使用未记录的批量渲染功能来避免这种情况（0.14，请注意0.13具有不同的API）：

ReactDOM.unstable_batchedUpdates(myFunctionThatDispatchesActions);

另一种选择可能是使用现成的Flux实现，它已经为您完成了这项工作。参见例如https://github.com/acdlite/redux-batched-updates