React.js - 通量与全局事件总线

Posted 2023-02-22

【中文标题】React.js - 通量与全局事件总线

【英文标题】：React.js - flux vs global event bus

【发布时间】：2015-06-20 23:21:14

【问题描述】：

与全局事件总线相比，使用 Flux 有什么优势？我认为调度程序就是所需要的：

组件将带有数据的“用户事件”发布到调度程序 调度程序执行订阅存储的处理程序 处理程序使用商店的更新属性发布“更新事件” dispatcher 执行订阅组件的处理程序，并使用商店的更新属性更新组件状态

我在这里缺少什么是没有 Flux 无法做到的？

【问题讨论】：

您的问题已更改 3 次！问一个额外的问题而不是改变这个:-)

对不起！我回滚了这个问题，在这里添加了一个新问题***.com/questions/29677779/…

【参考方案1】：

我认为其他人关于应用程序结构和change 事件的说法很重要，但我应该补充一点：

调度程序的waitFor 方法是向调度程序注册商店与侦听全局事件总线的商店之间的最大区别。此方法可让您管理哪些商店在其他商店之前更新。如果您希望 StoreB 在决定做什么之前先查看 StoreA 做了什么，这一点就变得至关重要。

您可以将调度程序视为具有waitFor 方法的全局事件总线，这有点准确。

【参考方案2】：

我不是 Flux 方面的专家，但架构无法让您完成以前不可能的事情，它为您的应用程序提供了可扩展且易于理解的结构。

【参考方案3】：

我相信这都是关于代码结构的，即使是大规模的也可以理解。

假设您有 appState，其中包含组件的基础数据。

组件调用action。 Action 负责从 XHR 收集数据或修改来自组件的传入数据，然后将 完整数据 分发到订阅的存储。

Store 是您代码中唯一可以修改您的appState 的部分，它基本上是唯一的，它的作用。它从action中获取数据并将它们存储到appState或根据action从appState中删除一些数据。

然后你触发 stateChanged 事件，你的组件应该监听并重新渲染。

因此，您在操作中拥有所有特定于操作的逻辑。你只在商店里处理appState。这应该可以帮助您使您的代码易于理解。

通量模式

我对为什么只发送完整数据是个好主意的理解主要来自this article。并且是基于官方的 Facebook Flux 图

这种方法的优点是：

存储简单且同步，不包含决策逻辑，仅处理给定数据 无需在 store 中触发另一个动作，这会破坏 Flux 的单向链 调度程序是所有状态变化的单一通道，它知道处理什么数据的动作，因此更容易调试

【讨论】：

您能否详细说明在操作中执行 xhr 或修改传入数据而不是商店的事件处理程序的优势？

@tldr 执行来自动作创建者的 API 调用可以让您更好地响应创建动作的失败。当您将操作发送到商店时，您是在说该操作已经完全发生。调度程序更像是一个“事件总线”

动作已经完全发生：响应将触发另一个动作。那里

【参考方案4】：

您基本上描述了通量，唯一的区别是：

商店发出更改事件

更新其状态的组件不是 Flux 的一部分，这是整合 Flux 和 React 的常见做法。

Flux 只是为这些部分命名，并就每部分的职责给出指导。

它本质上是一个主事件发射器（调度程序）、事件类型（动作）、在调度程序上发出事件的函数（动作创建者；事件主体是有效负载），以及其他事件发射器：保持状态、监听发送到调度程序并发出更改事件（存储）。

至少它在 JS 中是这样工作的。核心原理是单向数据流。有很多用于双向通信的事件发射器。