Reflux是一个简单的单向数据流应用程序架构库,其灵感来自Facebook的Flux状态管理库,相对来说Reflux会比Flux简单,我们可以从Reflux的Todo示例,来理解Reflux在实际的应用
store.js
/**
* Created by Freax on 2016/5/30.
* @website http://www.myfreax.com
*/
import Reflux from 'reflux'
import actions from './actions'
/**
* store 就像是react组件,也有生命周期
* 创建store可以使用createStore方法
*/
let store = Reflux.createStore({
listenables: [actions], //监听所有action
getInitialState:function () {
return this.list = [];
},
/**
* 监听action添加回调处理程序,
* 响应action操作
* User interaction -> component calls action -> store reacts and triggers -> components update
* store reacts and triggers
* @param text
*/
//注意回调方法命名规则action前面加上on并且把action第一个字母大写
onAddItem: function (text) {
this.list.push(text);
this.updateList(this.list);
},
updateList: function(list){
this.list = list;
//User interaction -> component calls action -> store reacts and triggers -> components update
this.trigger(list); //触发在上监听store变化的组件更新 components update
//store triggers -> components update
}
});
export default store;
actions.js
/**
* Created by Freax on 2016/5/30.
* @website http://www.myfreax.com
*/
import Reflux from 'reflux'
/**
* 每个action就像是一个特定的事件通道,action由component来回调
* store监听着全部action,component监听store的变化
* 可以看出数据流是这样的 用户交互 -> component回调action -> store响应并且触发 -> components更新
*
*/
export default Reflux.createActions([
'addItem'
]);
Items.js
/**
* Created by Freax on 2016/5/30.
* @website http://www.myfreax.com
*/
import React from 'react'
import Item from './Item'
import Reflux from 'reflux'
import store from './store'
export default React.createClass({
//当 store trigger(updatedlist)时,将会 setState({list:updatedlist})更新组件
mixins:[Reflux.connect(store,'list')],
render(){
let items = this.state.list.map((value)=> {
return <Item key={value}>{value}</Item>
});
return (
<div>
<ul className="collection" style={{display:items.length?'block':'none'}}>
{items?items:''}
</ul>
</div>
);
}
});
完整代码Github