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 隔离了。