一、flux由四部分组成
(1)view:视图层
(2)action:发出的动做,视图层发出的动做,onClick等
(3)dispatcher:派发器,用来接收action,进行相应的数据处理
(4)store:数据层,用来存放状态,一旦发生改变,就会通知视图层
flux的数据流程
一、view层的数据想进行修改,会给dispatcher发送一个action
经过dispatcher.dispatch来发送action
dispatcher.dispatch({
type:"",
value:
})
二、dispatcher之中接收到action,进行对比,要求store进行相应的数据更新
import {Dispatcher} from "flux"
const dispatcher=new Dispatcher()
dispatcher.register((action)=>{
switch(action.type){
case "":
store.事件名称
}
})
三、store中进行数据处理,建立一个函数,在函数内部进行事件的监听供view层调用,触发的时候进行数据的改变
handleUpdate(fn){
this.on("update")
}
四、在组件中调用事件监听的方法进行修改数据
store.handleUpdate(this.handleUpdate.bind(this))
handleupdate(){
this.setState(store.getState())
}
store是手动建立的
import EventEmitter = require("events")
const store =Object.assign({},EventEmitter.prototype,{
state:{}
getState(){
return this.state
}
})
export default store