flux 基础

去年在学完react后，空了几个月。之后了解到了flux。

找了时间去研究了下，也看了些例子，自己也写了些。

这里做个笔录，以后呢好查找。

当然写时也看了网上的文章，有地方直接复制的。

flux是fb开发的前端架构，通过利用一个单身数据流补充了react的组合视图组件。

它算是一种模式并非完整的框架。

它有几大组成部分，从底层向view层说起吧。

store  dispatcher action view 

store仓库包含应用数据和操作，它上会有获取，修改数据方法，还有事件回调绑定和取消绑定。

还有回调触发。

它像mvc 中的m但是多了回调的管理。

这里的回调一般是change修改的回调。

例如：当数据添加了一条，在调用添加方法后调用emit 回调来触发。

从而告诉绑定change对象，我的数据更新了。你操作吧。

一般来说绑定都会在顶层组件内绑定。组件去更新自己的状态数据。

会引起子组件更新。这样传递下去。

但是按正常的思路，事件的触发修改数据都是由用户来操作的。也就是view层上触 发的。

那么怎么样把这些操作传递到store呢？

这时action动作就出现了。

这个模块会接收到view上的操作由它来触发stroe上的方法，来实现数据更新。

据体呢就是action上开放许多方法，参数来接收操作数据。

但是这样每种数据操作都需要写一个方法。当组件多了时action就可能有几百个方法了。

不太好维护。

这时dispatcher调度就出现了。

它管理着stroe的调用，而acion需要触发 调度上的注册。

Dispatcher 的作用是将 Action 派发到 Store、。你可以把它看作一个路由器，
负责在 View 和 Store 之间，
建立 Action 的正确传递路线。注意，Dispatcher 只能有一个，而且是全局的。

//register 用来登记各种动作并执行不同的store方法

它通过判断action.actionType动作类型来执行不同的store操作。

它可以在store模块内注册 ，把store的操作都注册到dispatcher上。

但是需要注册 的是当有多个store时需要定义不同的动作类型名称，来区别它们。

在action上通过调用dispathcher.dispatch方法传递actionType类型和数据，

来调用dispathcer上注册的操作。

这就是flux的流程了。

总结：

应用顶层控制组件上初始化状态时获取store上数据，在第一渲染后监听store的修改事件，在注销时解除事件。

事件内重新更新组件状态。

并创建操作action的方法

通过props传递状态和actioni到子组件。

当然子组件也可以引入action动作自己触发。

有view上的操作时触发action指定的动作方法并传递数据。

动作内去传递操作到dispatcher，收到后从注册内通过动作类型来区别，应该执行哪个store操作或多个store.

当store收到参数时更新数据。这时会触 发在组件控制层上绑定的修改事件。view会去更新自己的状态数据。

这就是flux的运行了。

心得：

在引用组件模块时变量的名称首字母需大写，不然react不会渲染组件的。

dispatcher模块可以只创建调度对象。store的注册 可以在 store模块内引用dispathcer来注册 。

而action模块可以定义多个和store模块一样，统一规范和模块名。

实现store actioni一一对应。

在dispatcher注册 中的case 值和action内触发的动作类型需要一致。

可能维护一个键值一样的模块对象，在dispathcer的case 值和action中动作类型参数都用此对象的属性。

这样好维护一些。

在写小的简单的组件时，最好所有的值都通过props来传递，如点击事件方法，id classname 默认值这些都传递来获取。

这样对于组件的重复使用有好处。