6、Flux

Flux

一个 Flux 应用主要包含四个部分：

• dispatcher:处理动作分发，维护 Store 之间的依赖关系
• stores:数据和逻辑部分
• views:React 组件，这一层可以看作 controller-views，作为视图同时响应用户交互
• actions:提供给 dispatcher ，传递数据给 store

1、单向数据流

Flux 的核心：单向数据流

Action -> Dispatcher -> Store -> View
View 会通过用户交互触发 Action

整个流程如下：

• 首先要有 action，通过定义一些 action creators 方法根据需要创建 Action 提供给 dispatcher
• View 层通过用户交互（比如 onClick）会触发 Action
• Dispatcher 会分发触发的 Action 给所有注册的 Store 的回调函数
• Store 回调函数根据接收的 Action 更新自身数据之后会触发一个 change 事件通知 View 数据更改了
• View 会监听这个 change 事件，拿到对应的新数据并调用 setState 更新组件 UI

所有的状态都由 Store 来维护，通过 Action 传递数据

2、Dispatcher

Dispatcher 分发动作给 Store 注册的回调函数，这和一般的订阅/发布模式不同的地方在于：

• 回调函数不是订阅到某一个特定的事件，每个动作会分发给所有注册的回调函数
• 回调函数可以指定在其他回调之后调用

Dispatcher.js 提供的 API:

• register(function callback): string

  注册回调函数，返回一个 id 供在 waitFor() 使用

• unregister(string id): void

  通过 id 移除回调

• waitFor(array ids): void

  在指定的回调函数执行之后才执行当前回调。
  这个方法只能在分发动作的回调函数中使用

• dispatch(object payload): void

  分发动作 payload 给所有注册回调

• isDispatching(): boolean

  返回 Dispatcher 当前是否处在分发的状态

3、Action

• 首先要创建动作，通过定义一些 action creators 方法来创建，这些方法用来暴露给外部调用，通过 dispatch 分发对应的动作

• 所谓动作就是用来封装传递数据的，动作只是一个简单的对象，包含两部分：payload（数据）和 type（类型），type 是一个字符串常量，用来标识动作。

4、Store

• 在 Store 注册给 dispatcher 的回调函数中会接受到分发的 action，因为每个 action 都会分发给所有注册的回调，所以回调函数里面要判断这个 action 的 type 并调用相关的内部方法处理更新 action 带过来的数据（payload），再通知 view 数据变更。

• Store 里面不会暴露直接操作数据的方法给外部，暴露给外部调用的方法都是 Getter 方法，没有 Setter 方法，唯一更新数据的手段就是通过在 dispatcher 注册的回调函数。

5、View

• View 就是 React 组件，从 Store 获取状态（数据），绑定 change 事件处理。

• 一个 View 可能关联多个 Store 来管理不同部分的状态，得益于 React 更新 View 如此简单（setState），复杂的逻辑都被 Store 隔离了。