1、模拟按钮点击num++
2、什么是flux
Flux是Facebook用来构建客户端Web应用的应用架构。它利用单向数据流的方式来组合React中的视图组件。它更像一个模式而不是一个正式的框架,开发者不需要太多的新代码就可以快速的上手Flux。
3、使用
View层产生了用户操作(user interfaction)调用了actionCreator的方法,创造了action发送到dispatcher,dispatcher经过判断后调用store的方法更改状态,
store触发事件,事件的处理程序就是让View获取最新的数据
4、例子(登录等共享数据)
React(view)=> user click => action creators => actions =>dispatcher => callback => store => change Events + store queries => React(view)
下载:cnpm i flux -S
1> dispatcher
事件调度中心,flux模型的中心枢纽,管理着Flux应用中的所有数据流。它本质上是Store的回调注册。每个Store注册它自己并提供一个回调函数。当Dispatcher响应Action时,通过已注册的回调函数,将Action提供的数据负载发送给应用中的所有Store。应用层级单例!!
2> store
负责封装应用的业务逻辑跟数据的交互。
Store中包含应用所有的数据
Store是应用中唯一的数据发生变更的地方
Store中没有赋值接口---所有数据变更都是由dispatcher发送到store,新的数据随着Store触发的change事件传回view。Store对外只暴露getter,不允许提供setter!!禁止在任何地方直接操作Store。
3> view
controller-view 可以理解成MVC模型中的controller,它一般由应用的顶层容器充当,负责从store中获取数据并将数据传递到子组件中。简单的应用一般只有一个controller-view,复杂应用中也可以有多个。
controller-view是应用中唯一可以操作state的地方(setState())
view(UI组件) ui-component 职责单一只允许调用action触发事件,数据从由上层容器通过属性传递过来。
4> 其他
action creators 作为dispatcher的辅助函数,通常可以认为是Flux中的第四部分。ActionCreators是相对独立的,它作为语法上的辅助函数以action的形式使得dispatcher传递数据更为便利。
5、创建store.js用来管理状态,例如登录信息、定位信息等在多个组件共享的信息
<!--采用观察者模式 对事件进行检测 得到结果 进行双向绑定-->
const EventEmitter = require('event').EventEmitter //用来绑定事件
var store = Object.assign({},EventEmitter.prototype,{ //合并方法
num: 1,
addNumber:(){
this.num++;
this.emit('numChange')
},
getNum:(){
return this.num
},
addNumberChange(callback){
this.on('numChange',callback)
}
})
export default store
6、actionCreator 创建actions.js
import dispatch from './dispatch.js'
const actions = {
addNumber(){
let action = {
type: 'SAVE_NUMBER'
}
dispatcher: dispatch(action)
}
}
export default actions
7、dispatch.js
import store from './store'
var Dispatcher = require('flux').Dispatcher
var dispatcher = new Dispatcher() //派发器
dispatcher.register(funtion(action){
switch(action.type){
case SAVE_NUMBER:store.addNumber();break;
}
})
export default Dispatcher
8、在组件中接收
import store from './store.js'
import actions from './actions.js'
constructor(props){
super(props)
this.state = { num: store.getNum() }
}
add(){
actions.addNumber()
}
compoentDidMount(){
store.addNumberChange(function(){
this.setData({
num: store.getNum()
})
}.bind(this))
}
<!--view层点击事件-->
<button onClick={this.add.bind(this)}>+</button>