簡(jiǎn)單來講就是4步
1.創(chuàng)建view力麸，并且在view里監(jiān)聽store的變化
2.在view里国夜，調(diào)用相應(yīng)actions，在actions里處理相應(yīng)邏輯涌哲，使用dispatcher把結(jié)果發(fā)送給store
3.在store里富蓄，做相應(yīng)處理伏蚊，儲(chǔ)存數(shù)據(jù)。
4.view監(jiān)聽到store有變化格粪，調(diào)用this.setState()或this.forceUpdate()觸發(fā)render()，在render()里根據(jù)不同的state渲染不同的界面
ALT在各種flux設(shè)計(jì)思路中是比較容易上手的氛改。示意圖如下：
創(chuàng)建ALT帐萎，并且把a(bǔ)ctions跟store放進(jìn)去。
第一步胜卤，安裝alt
npm install --save ?alt
第二步疆导，新建第一個(gè)文件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) {//在這里相應(yīng)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;
