结构分为四个
视图 view
动作 action
派发器 dispatcher
数据商店 store
流程:
用户操作视图 视图(view)发送动作(action)到派发器(dispatcher)
由派发器(dispatcher) 对动作类型(action.type)做判断
然后调用数据商店(store)的相应方法来操作数据模型(store.state)
最后由数据商店(store)通知视图(view)进行更新
在完整的案例中
action只是起到传递数据的作用 本质就是一个对象而已
action最好用专门的工厂函数来进行创建(actions)
在视图中 通过调用action工厂函数来生产aciton 再由工厂函数将action发送给派发器
同时 在开发时 应将视图部分进行拆分
拆分成 : 容器组件和UI组件
UI组件纯粹负责显示数据
容器组件负责处理业务逻辑
由容器组件提供更新视图的方法
然后在组件加载完成时 将更新视图方法提供给store
store应将其绑定到更新视图专用的事件上
例如:
let EventEmiiter = require("events").EventEmiiter
let store = {
...EventEmiiter.prototype,
subscribe(cb){
this.on("update",cb)
},
setUsername(name){
this.state.name = name
this.emit("update") //通知视图进行更新
},
unSubscribe(cb){ //注意: 在组件的卸载期 记得将更新视图函数进行解绑
this.removeListener("update",cb)
}
}
flux重构步骤：
1 将视图部分的页面组件拆分成容器组件和UI组件
UI组件所有数据(点击等各种事件所调用的函数)均来自于props
容器组件可继承 封装好的 Controller 以自动实现绑定更新视图方法及卸载组件时自动解绑
2 创建action工厂函数
定义一个初始化 的action工厂函数
请求需要的数据
将拿到的数据封装到 action中
将action发送到dispatcher (通过.dispatch()方法)
3 在派发器中 配置对应的case
并且从action中拿到数据后 设置到对应store中即可
4 在容器组件的加载完成的生命周期函数中 调用上述步骤封装好的action工厂函数
5 路由部分引入的组件 注意需要切换成 容器组件