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

Posted 2023-02-22

【中文标题】Flux - 如何处理多个商店更新相同的视图？

【英文标题】：Flux - How to deal with multiple stores updating the same view?

【发布时间】：2016-01-27 08:53:38

【问题描述】：

我是通量模型的初学者，但我认为我对它的理解程度很高：

事件创建者 -> 事件 -> 调度 -> 存储 -> 查看我们开始！

鉴于通量模型支持多个商店，如果您说一个事件循环分派到 2 个以上的商店，它会依次更新同一个视图。

您如何管理该过程中可能出现的任何无意闪烁？

我还没有完全启用/使用反应（我假设一个包罗万象的答案将是反应处理减少这个的繁重部分）但从概念上讲，这如何在特定实现之外工作。

由于商店更改是在商店之间连续应用的，您是否只是等到所有商店都停止处理调度程序，然后允许它们单独触发所有更改？即使这样，您仍然会在最后循环并分派事件，并且您仍然可能对 UI 进行重叠更新。

谢谢！

【参考方案1】：

您有不同的选择：

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

需要注意的是，您的操作类型和存储结构需要同步：每个操作都需要与包含在 waitFor 循环中的 所有 存储进行通信。图片中的示例将无法触发渲染。最顶层的 store 没有监听 dispatcher 的动作，正确的 store 会一直等待更新。此外，如果红线只是其中的一个组件，则可能会导致类似的死胡同。我的处理方式是：让第一行中的所有商店都监听所有动作，如果动作不相关：发出变化。

另一种选择是将您的数据整合到一个商店中。 这不会使问题消失：您需要处理单个商店中的依赖问题。但它确实消除了许多操作、许多等待和许多变更排放的麻烦..

【参考方案2】：

请记住，该操作是同步处理的——在堆栈展开并且浏览器有机会重新渲染 DOM 之前，所有存储都已发出，控制器视图已调用 setState 等，因此闪烁是不可能的（浏览器不会在函数运行过程中呈现，否则所有 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