Flux 入门

[ClarenceC]

概念

Flux 是用来构建用户端 Web 应用的架构，它包含三个核心概念：Views, Stores 和 Dispatcher，还有一些次级概念：Actions, Action Types, Action Creators 和 Web Utils。

核心概念

• Views 即 React 组件。它们负责渲染界面，捕获用户事件，从 Stores 获取数据。
• Stores 用于管理数据。 一个 Store 管理一个区域的数据，当数据变化时它负责通知 Views。
• Dispatcher 接收新数据然后传递给 Stores，Stores 更新数据并通知 Views。

次级概念

• Actions 是传递给 Dispatcher 的对象，包含新数据和 Action Type。
• Action Types 指定了可以创建哪些 Actions，Stores 只会更新特定 Action Type 的 Actions 触发的数据。
• Action Creators 是 Actions 的创建者，并将其传递给 Dispatcher 或 Web Utils。
• Web Utils 是用于与外部 API's 通信的对象。例如 Actions Creator 可能需要从服务器请求数据。

结构和数据流

一个单向数据流是Flux模式的核心，上面示图应该是Flux程序员心中主要的模型图。dispatcher 存储和视图是有着不同输入输出的独立节点，Action动作是一个简单对象，只是包含新的数据和一个标识符类型的属性。

　视图也许引起新的动作Action，这个动作作为用户交互的响应将在整个系统传播.

所有通过dispatcher的数据流将作为一个集中式Hub，动作Action在一个action creator方法中被提供给dispatcher，这个动作通常来自于视图中用户的交互，dispatcher然后调用存储已经注册其中的回调函数，分发Action动作到所有的存储，在它们注册的回调函数中，存储会响应每个和它保存的状态有关的每个动作Action，存储然后发射一个 change改变的事件去提醒controller-view控制器-视图，更新到刚刚改变的新数据。controller-view监听这些事件，然后在一个事件处理器中从存储中获取数据，controller-view调用它们自己的"setState()"方法，这会触发视图的重新渲染，包括DOM组件树中所有更新。

学习事例 starter kit 官方示例

文章参考 segmentfault