JavaScript 架构 Flux 组件
Flux：它是一种 JavaScript 架构或 UI 模式，它在单向数据流上运行并具有集中式调度程序。它是一种应用程序架构，旨在构建客户端 Web 应用程序。它也是 Facebook 用于构建客户端 Web 应用程序的流行架构之一。 Flux 架构基于以下组件。
Flux 的四个主要组成部分：
- Dispatcher：它协调对商店的操作和更新。
- Stores：它作为应用程序状态和逻辑的容器
- 动作：它允许将数据传递给调度程序
- 视图：它与 MVC 架构中的视图相同，但在 React 组件的上下文中。
简单来说，如果我们理解整体的话，那么在 Flux 架构中基本上假设用户点击了某个东西，视图会创建动作； Actions 创建一个新数据并将其发送给调度程序，调度程序的工作就在这里，调度程序将操作结果调度到适当的存储。然后商店根据结果更新状态并向视图发送更新。
Flux 应用程序中的数据单向流动，或者我们可以说 Flux 应用程序中的数据单向流动，单向流动的意义在于，由于数据以单向流动通过您的应用程序，我们可以更好地控制它。
流动：
Action => Dispatcher => Store => View调度员：
调度程序是管理 Flux 应用程序中所有数据流的中央枢纽，本质上是一个回调到存储的注册表，没有自己的智能，或者我们可以说它是一种将操作分发到存储的简单机制。
- 它是任何 Flux 应用程序中数据流的中心
- 它控制流入 Flux 应用程序存储区的内容。
- 它充当由商店创建并链接到调度程序的回调的存放位置。
- 应用程序中的每个商店都会创建一个回调，将其注册到调度程序。
- 当动作创建者向调度程序发送新动作时，调度程序确保由于提供的回调，所有已注册的商店都获得了该动作。
注意：调度器是数据依赖的最终仲裁者。
Flux 架构对于包括使代码更清晰、更新其他视图和新开发人员调试等效果的操作很有帮助。它还包括一个单例调度程序，所有操作都通过调度程序。这种设计保护了难以调试的级联更新。
商店：
store 是应用程序状态和逻辑的枢纽，其作用类似于传统 MVC 中的模型。它向调度程序注册自己并为其提供回调，并接收动作作为参数。
- 它包含 Flux 应用程序的逻辑和状态。
- Flux 中的 store 不是像传统模型那样表示单个数据结构，而是实际上可以表示许多对象的管理状态。
- 它向调度程序注册自己并为其提供回调。
- 传递的回调有一个称为操作的参数，通过调度程序传递给它。
注意：商店是状态所在的地方，只有商店自己才能改变这种状态。
Flux 架构使用 Store 来缓存与数据或状态相关的任何应用程序。它包括多个商店。它还具有逻辑处理能力和灵活性，可以决定公开显示数据的哪些部分。
行动：
当调度程序公开一个允许我们触发对存储的调度并包含数据有效负载的方法时，我们称之为操作。操作也可能来自其他地方，例如服务器，例如在初始化期间或服务器返回错误代码或服务器有更新要提供给应用程序时键入数据。
- 动作定义了视图调用的方法。
- 它是已发送到商店的数据形式。
- 这些方法包含参数，其中包含有关视图如何更改存储的进一步说明。
- 该操作负责将调度调用转换为事件；商店可以理解的。
注意：如果它不是一个动作，它就不会发生。
Flux 架构中的操作是在视图内或视图内调用以将操作发送到 Dispatcher 的方法的集合。它是通过调度程序传递的实际有效负载之一。动作类型示例排版用于定义必须发生的动作并与动作数据一起发送。
意见：
它不是 Flux 的技术部分，但同时，视图显然是我们应用程序的关键部分。它主要被理解为我们架构中负责向用户展示数据的部分，它是我们数据流架构的最后一站。视图存在于通量之外，但受到通量的单向性的限制。
- 它只是组件的组成。
- 它是架构的一部分，负责向用户显示数据。
- 视图层是 React 适合此架构的层。
注意：数据流出视图的唯一方法是调度一个动作。
它基本上只是一个 React 组件，它侦听更改事件并从存储中检索应用程序的状态，从而将这些数据传递给它们的子组件。