简单来讲就是4步
1.创建view,并且在view里监听store的变化
2.在view里,调用相应actions,在actions里处理相应逻辑,使用dispatcher把结果发送给store
3.在store里,做相应处理,储存数据。
4.view监听到store有变化,调用this.setState()或this.forceUpdate()触发render(),在render()里根据不同的state渲染不同的界面
ALT在各种flux设计思路中是比较容易上手的。示意图如下:
创建ALT,并且把actions跟store放进去。
第一步,安装alt
npm install --save alt
第二步,新建第一个文件alt.js
var Alt=require('alt');
var alt=new Alt();
module.exports=alt;
第三部,新建Actions
var alt=require('../alt');
classLocationActions{
updateLocations(locations){
return locations;
}
module.exports=alt.createActions(LocationActions);
第四部,新建Store
var alt = require('../alt');
var LocationActions = require('../actions/LocationActions');
class LocationStore {
constructor() {
this.locations = [];
this.bindListeners({//在这里绑定Actions
handleUpdateLocations: LocationActions.UPDATE_LOCATIONS
});
}
handleUpdateLocations(locations) {//在这里相应Actions
this.locations = locations;
}
}
module.exports = alt.createStore(LocationStore, 'LocationStore');
第五步,在view里接受store变化
var React = require('react');
var LocationStore = require('../stores/LocationStore');
var Locations = React.createClass({
getInitialState() { return LocationStore.getState(); },
componentDidMount() { LocationStore.listen(this.onChange); },
componentWillUnmount() { LocationStore.unlisten(this.onChange); },
onChange(state) { this.setState(state); },
render() {。。。。。}
); }});
module.exports = Locations;