Flux设计之路(一)...ALT

简单来讲就是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;