JavaScript 架构Flux组件

Flux： 它是一个基于JavaScript的UI架构或模式，采用单向数据流并拥有集中式的调度程序。它是一个用于构建客户端Web应用程序的应用程序架构。同时，它也是Facebook用于构建客户端Web应用程序的流行架构之一。Flux架构基于以下组件。

Flux的四个主要组件：

1. 调度程序： 它用于协调操作和对存储的更新。
2. 存储： 它作为应用程序状态和逻辑的容器。
3. 操作： 它使得数据传递给调度程序。
4. 视图： 在React组件的上下文中与MVC架构中的视图相同。

简单来说，如果我们理解整个Flux架构，假设用户点击了某个东西，视图创建操作；操作创建了新的数据并将其发送给调度程序，这时调度程序的工作开始了，调度程序将操作结果发送到适当的存储。然后，存储根据结果更新状态并将更新发送给视图。

Flux应用程序中的数据流向是单向的，或者可以说数据在Flux中是单向流动的，单向流动的意义在于，由于数据沿着应用程序的单一方向流动，我们能更好地控制它。

数据流：

Action => Dispatcher => Store => View

调度员：

调度员是在流量应用中管理所有数据流的中心枢纽，基本上是一个回调到没有自己智能的存储库，或者我们可以说它是将操作分发到存储的简单机制。

• 它是任何Flux应用程序中数据流的中心。
• 它控制流入Flux应用程序的存储。
• 它作为存储创建的回调的容纳地，这些回调连接到调度员。
• 应用程序中的每个存储都创建一个回调，将其注册到调度员中。
• 当操作创建者将新操作发送到调度员时，调度员通过所提供的回调确保所有注册的存储都获得该操作。

注意： 调度员是数据依赖关系的最终仲裁者。

Flux架构有助于包含使代码更清晰、更新其他视图和由新开发人员进行调试的操作。它还包括了一个单例调度员，所有操作都会通过调度员传递。这种设计能避免难以调试的级联更新。

存储：

存储是应用程序的状态和逻辑的中心，其角色类似于传统MVC中的模型。它向调度员注册自己并提供回调，此回调接收操作作为参数。

• 它包含Flux应用程序的逻辑和状态。
• 与传统模型只代表单个数据结构不同，Flux中的存储实际上可以代表许多对象的管理状态。
• 它向调度员注册自己并提供回调。
• 所传递的回调具有一个称为操作的参数，通过调度员传递给它。

注意： 存储是状态存在的地方，只有存储本身才能更改此状态。

Flux架构使用存储来缓存与数据或状态相关的应用程序。它包括多个存储。它还具有逻辑处理能力和灵活性，可以决定公开显示数据的哪些部分。

操作：

当调度员暴露出一个方法，允许我们触发传递到存储的调度，并包括一个数据有效载荷，我们称之为操作。操作也可以来自其他地方，例如服务器，在初始化期间类型化数据或者当服务器返回错误代码或服务器有更新要提供给应用程序时。

• 操作定义了将由视图调用的方法。
• 它是已分发到存储的形式数据。
• 这些方法包含参数，其中包含有关视图希望如何更改存储的进一步指令。
• 操作负责将调度呼叫转换为存储可以理解的事件。

注意： 如果它不是一个操作，它就不能发生。

Flux架构中的操作是在视图中调用的一组方法，用于向调度员发送操作。它是通过调度员传递的实际有效载荷之一。操作类型示例用于定义必须发生的操作，并与操作数据一起发送。

视图：

这不是Flux的技术部分，但同时，视图明显是我们应用程序的关键部分。它主要被理解为我们架构的一部分，负责向用户显示数据，它是我们数据流架构的最后一站。视图存在于Flux之外，但受到Flux单向性质的限制。

• 它只是组件的组合。
• 它是架构的一部分，负责向用户显示数据。
• 视图层是React适应该架构的层。

注意： 视图的数据流出仅通过分派一个动作。

基本上，它只是一个React组件，监听变化事件并从存储中检索应用程序的状态，然后将该数据传递给其子组件。