Flux从提出到现在先先后后看了好多次，看官方demo的时候感觉有些理解，过后又说不出个一二，所以今天抽空从项目目录结构的创建都自己来实现一遍，感觉对Flux的理解比前面看的时候要好。

Flux: 单向数据流，View(Component)交互触发Action，Action通过Dispatcher发布事件，Store响应Dispatcher发布的事件，更新数据，发出Change事件，View响应change事件，更新View。View不应该通过Store直接操作数据。

来自flux官网的经典图片

Flux只是一种模式，不是随拿随用的框架，因此这些需要自己实现。

我在学习时写的是一个简单的评论列表样例，用户可以在输入框中写评论，点击评论提交，然后实时渲染到评论列表中。
目录结构

Paste_Image.png

用户与View交互产生Action

Paste_Image.png

（这里也可以直接引用Store进而操作数据，不过就造成了View和Store的直接交互。）

Action调用Dispatcher.dispatch()发布事件

Action是一个全部交互个改变的入口，需要自己注册Action用于后续调用，一个Action由actionType和payload组成

Paste_Image.png

Dispatcher发布事件

Dispatcher将Action和Store联系在一起，Action中通过Dispatcher.dispatch({actionType, payload})来分发事件，Store中通过Dispatcher.register(function(action))来响应其注册的Action。

Dispatcher发布事件

Store响应注册事件

Store对响应的数据做出改变，需要通知View数据已经变化并进行更新。

Store告诉View数据更新了

但是Store本身并没有发布/接收事件的功能，因此要借助其他模块的方法。这里使用Node的events的EventEmitter，以及object-assign来实现对象间的继承。

对Store进行扩展，使其具有注册/发送事件的能力

Paste_Image.png

这样一来，整个组件就已经运作起来了:

1. 用户输入信息后点击提交按钮，�Action.create();  --View层

2. Action中对应的action方法被触发，发布事件Dispatcher.dispatch('create', payload); --Action层

3. Dispatcher发布create事件。 --Dispatcher层

4. 注册了对应Dispatcher的Store接收create事件，更新数据。更新完毕后，发布change事件。 --Store层

5. 注册了相应Store注册事件的View相应change事件，更新视图。 --View层

一次单向数据流循环结束。

总结:

对于flux这个概念性的东西，果然还是动手做了才对其有所体会啊~~_{其实是我脑子笨，理解力不行}~~！React v0.14.0也有了一些变化，同时也体验了一下webpack打包文件的强大功能，页面引入一个bundle.js就够了。
因为创建项目时命名上有些不一致，所以看起来可能有点乱乱的感觉_，作为一次学习总结，虽然写得烂，万一能帮到其他人呢，所以就发出来了~ ：）

作者：AAArrt
链接：https://www.jianshu.com/p/45f2baaa5957