React.js - flux vs全局事件总线

Question

在全球事件总线上使用Flux有什么优势？我认为调度员就是所需要的：

1. 组件发布＆＃39;用户事件＆＃39;将数据发送给调度员
2. 调度程序执行订阅商店的处理程序
3. 处理程序发布＆＃39;更新事件＆＃39;与商店的更新属性
4. 调度程序执行订阅组件的处理程序，并使用商店更新的属性更新组件状态

我在这里缺少什么，我不能使用Flux？

Answer 1

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

调度程序的waitFor方法是使用调度程序注册商店与侦听全局事件总线的商店之间的最大区别。此方法允许您管理哪些商店在其他商店之前更新。当你希望StoreB首先看看StoreA在决定做什么之前所做的事情时，这变得至关重要。

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

Answer 2

我不是一个流动的专家，但是一个架构不能让你做一些以前不可能的事情，它给你的应用程序一个可扩展和可理解的结构。

Answer 3

我相信所有关于代码结构的内容即使在大规模下也是可以理解的。

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

组件调用操作。 Action负责从XHR收集数据或修改组件中的传入数据，然后将完整数据发送到订阅商店。

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

然后你发起stateChanged事件，你的组件应该听取并将重新呈现。

所以你在行动中拥有所有特定于行动的逻辑。您只在商店处理appState。这应该可以帮助您保持代码的可理解性。

磁通模式

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

这种方法的优点是：

• 存储是简单且同步的，不包含决策逻辑，只处理给定数据
• 无需在商店中触发另一个动作，这将打破Flux的单向链
• 调度程序是所有状态更改的单一通道，它知道处理哪些数据的操作，因此更容易调试

Answer 4

你基本上描述了助焊剂，唯一的区别是：

1. 商店发出更改事件

更新状态的组件不是助焊剂的一部分，这是整合助焊剂和反应的常见做法。

Flux只列出了每一件作品，并给出了每件作品的指导原则。

它本质上是一个主要事件发射器（调度程序），事件类型（动作），在调度程序上发出事件的函数（动作创建者;事件体是有效负载），以及其他事件发射器：保持状态，侦听到调度员并发出变更事件（商店）。

至少这是它在JS中的运作方式。核心原则是单向数据流。有许多事件发射器用于双向通信。