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;

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容