1 简介

Application architecture for building user interfaces.
用于构建用户界面的应用程序体系结构。
核心是单向数据流。

2 Flux介绍

Flux是Facebook用于构建客户端Web应用程序的应用程序体系结构。

3 Flux机制

它通过利用单向数据流来补充React的可组合视图组件。
Flux工作流程图如下：
在这里插入图片描述

View: 应用的界面。这里创建响应用户操作的action。
Dispatcher: 中心枢纽，传递所有的action，负责把它们运达每个Store。
Store: 维护一个特定application domain的状态。它们根据当前状态响应action，执行业务逻辑，同时在完成的时候发出一个change事件。这个事件用于view更新其界面。

在这里插入图片描述
1、Action，它是用来描述一个行为的对象，每个action里都包含了某个行为的相关信息。比如， {actionName: ‘CREATE_POST’, data: {‘content’: ‘new stuff’}}
2、Dispatcher，它是一个信息分发中心，它是action和store的连接中心。它可以使用dispatch方法执行一个action，并且可以用register方法注册回调，在回调中处理store中的数据。
3、Store，它是数据操作的唯一地方，当数据发生变化时，它可以使用emit方法向其它地方发送名为’change’的广播，告知它们store已经发生了变化。
4、View，视图层监听了’change’事件，一旦change事件被触发，视图层就会调用setState方法来更新相应的UI State。

小结：
当用户在View上发生交互行为时，Dispatcher使用dispatch方法触发一个action（它包含了actionType和要传递的数据），在整个程序的总调度中心Dispatcher里面注册了各种类型的action类型，在对应的类型中，store实现了“订阅-发布”功能对这个action进行响应，同时对数据做相应的处理。数据处理完成后，触发一个自定义的change事件。View层在初始化完成时注册这个change事件，当接收到store的广播后，view层响应这个事件并重新渲染UI界面。