Flux从提出到现在先先后后看了好多次,看官方demo的时候感觉有些理解,过后又说不出个一二,所以今天抽空从项目目录结构的创建都自己来实现一遍,感觉对Flux的理解比前面看的时候要好。
Flux: 单向数据流,View(Component)交互触发Action,Action通过Dispatcher发布事件,Store响应Dispatcher发布的事件,更新数据,发出Change事件,View响应change事件,更新View。View不应该通过Store直接操作数据。
Flux只是一种模式,不是随拿随用的框架,因此这些需要自己实现。
我在学习时写的是一个简单的评论列表样例,用户可以在输入框中写评论,点击评论提交,然后实时渲染到评论列表中。
目录结构
用户与View交互产生Action
(这里也可以直接引用Store进而操作数据,不过就造成了View和Store的直接交互。)
Action调用Dispatcher.dispatch()发布事件
Action是一个全部交互个改变的入口,需要自己注册Action用于后续调用,一个Action由actionType
和payload
组成
Dispatcher发布事件
Dispatcher将Action和Store联系在一起,Action中通过Dispatcher.dispatch({actionType, payload})
来分发事件,Store中通过Dispatcher.register(function(action))
来响应其注册的Action。
Store对响应的数据做出改变,需要通知View数据已经变化并进行更新。
但是Store本身并没有发布/接收事件的功能,因此要借助其他模块的方法。这里使用Node的events
的EventEmitter
,以及object-assign
来实现对象间的继承。
这样一来,整个组件就已经运作起来了:
- 用户输入信息后点击提交按钮,�Action.create(); --View层
- Action中对应的action方法被触发,发布事件Dispatcher.dispatch('create', payload); --Action层
- Dispatcher发布create事件。 --Dispatcher层
- 注册了对应Dispatcher的Store接收create事件,更新数据。更新完毕后,发布change事件。 --Store层
- 注册了相应Store注册事件的View相应change事件,更新视图。 --View层
一次单向数据流循环结束。
总结:
对于flux这个概念性的东西,果然还是动手做了才对其有所体会啊~~其实是我脑子笨,理解力不行~~!React v0.14.0也有了一些变化,同时也体验了一下webpack打包文件的强大功能,页面引入一个bundle.js
就够了。
因为创建项目时命名上有些不一致,所以看起来可能有点乱乱的感觉→_→,作为一次学习总结,虽然写得烂,万一能帮到其他人呢,所以就发出来了~ :)