Flux应用有三个主要部分:Dispatcher调度 、Store存储和View视图,这些不应该和MVC:Model-View-Controll(模型-视图-控制器)混淆,控制器在Flux应用中是存在的,但是他们是controller-view(控制器-视图)
Flux是以单向数据流方式支持MVC,当一个用户和React视图交互时,视图会将这个动作传播到一个中央Dispatcher,一直到各种存储,在那里保存着应用的数据和业务逻辑
一个单向数据流是Flux模式的核心。dispatcher 存储和视图是有着不同输入输出的独立节点,Action动作是一个简单对象,只是包含新的数据和一个标识符类型的属性。
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。
所有通过dispatcher的数据流将作为一个集中式Hub,动作Action在一个action creator方法中被提供给dispatcher,这个动作通常来自于视图中用户的交互,dispatcher然后调用存储已经注册其中的回调函数,分发Action动作到所有的存储,在它们注册的回调函数中,存储会响应每个和它保存的状态有关的每个动作Action,存储然后发射一个 change改变的事件去提醒controller-view控制器-视图,更新到刚刚改变的新数据。controller-view监听这些事件,然后在一个事件处理器中从存储中获取数据,controller-view调用它们自己的"setState()"方法,这会触发视图的重新渲染,包括DOM组件树中所有更新