flux: flux思路的代码实现模板
- Store
\\ExampleStore.js //引入dispatch层暴露出来的方法 import AppDispatcher from '../dispatcher/AppDispatcher'; import EventEmitter from 'events'; import ActionTypes from '../constants/ActionTypes'; const CHANGE_EVENT = 'change'; const defaults = { a: [], b: null, c: 1, }; //定义store中需要被使用的数据流a, b, c的默认值 let _a = defaults.a; let _b = defaults.d; let _c = defaults.c; class ExampleStore extends EventEmitter { //定义view层可以获取store层数据a的方法 getA() { return _a; } //定义view层可以获取store层数据b的方法 getB() { return _b; } //定义view层可以获取store层数据c的方法 getC() { return _b; } //告知view层store有数据更新 emitChange() { this.emit(CHANGE_EVENT); } //在view层生命周期为componentDidMount时调用的监听函数,一旦store层有更新便立刻调用callback(回调函数), //回调函数由view层定义,通过调用getA(),getB(),getC()函数获取得到更新的a,b,c值,并通过this.setState() //更新view层state数据的状态,使得数据更新到页面上 addChangeListener(callback) { this.on(CHANGE_EVENT, callback); } //在view层申明周期为componentWillUnmount时调用的函数,组件卸载前将回调函数去除 removeChangeListener(callback) { this.removeListener(CHANGE_EVENT, callback); } } let exampleStore = new ExampleStore(); AppDispatcher.register(function(action) { switch (action.actionType) { //定义更新数据流a的方法 case ActionTypes.EXAMPLE_UPDATE: _a= action.a; exampleStore.emitChange(); break; //定义重置数据流a的方法 case ActionTypes.EXAMPLE_CLEAR: _a = default.a; exampleStore.emitChange(); break; //根据具体需求定义更多的方法,接收action层的dispatch并接收action传来的数据 ...... default: break; } }); //将实例化后的ExampleStore对象暴露给view层使用 export default exampleStore;
- Action
\\ExampleAction.js //引入dispatch层暴露出来的方法 import AppDispatcher from '../dispatcher/AppDispatcher'; import ActionTypes from '../constants/ActionTypes'; //封装的fetch方法,用于向后端通信,调用接口,获得数据 import {cfetch, checkStatus, parseJSON} from '../utils/cfetch'; class ExampleActions { //通过fetch向服务器发送异步请求,在检查完后端返回的状态码,解析完json后dispatch store层 updateA(id) { cfetch('/update/' + id) .then(checkStatus) .then(parseJSON) .then(function(json) { AppDispatcher.dispatch({ actionType: ActionTypes.EXAMPLE_UPDATE, a: json }); }); } //入上操作,不需要异步的行为 clear() { AppDispatcher.dispatch({ actionType: ActionTypes.EXAMPLE_CLEAR }); } } //将实例化后的ExampleActions对象暴露给view层使用 export default new ExampleActions;
- View
//ExamplePage.js import React, {Component, PropTypes} from 'react'; //引入action层暴露出来的方法 import ExampleActions from '../../actions/ExampleActions'; //引入store层暴露出来的方法 import ExampleStore from '../../stores/ExampleStore'; //定义获取store层的最新值的函数,监听到store触发时会用到 function getExampleState() { return { a: ExampleStore.getA(), b: ExampleStore.getB(), c: ExampleStore.getC(), } } class ExamplePage extends Component { constructor(props) { super(props); //组件初始化时,获取store层的默认值 this.state = { a: ExampleStore.getA(), b: ExampleStore.getB(), c: ExampleStore.getC() }; } componentDidMount() { //添加监听函数 ExampleStore.addChangeListener(this._onExampleChange); //此时可以调用action函数向后端发送异步请求,更新数据 ExampleActions.getA(); } componentWillUnmount() { //卸载监听函数 ExampleStore.removeChangeListener(this._onExampleChange); } render() { const {a,b,c} = this.state; //此处省略其他业务代码 .... return ( //此处省略其他业务代码 .... ); } //定义回调函数,从store层获取最新值,更新state状态,并进行相关操作(注意:this.setState() 是异步方法,所以添加回 //调函数作为第二个参数才能有效) _onExampleChange = () => { this.setState(getExampleState(), () => { //此处省略其他业务代码 .... }); }; //此处省略其他业务代码 .... } export default ExamplePage;
- Dispatch
//AppDispatcher.js //引入flux的Dispatcher方法 var Dispatcher = require('flux').Dispatcher; //实例化Dispatcher对象暴露给acion层和store层使用 module.exports = new Dispatcher();
- ActionTypes
//ActionTypes.js import keyMirror from 'keymirror'; export default keyMirror({ //在此文件中提前定义好所有的ActionType,方便store层和action层调用,免除多次声明,方便管理 EXAMPLE_UPDATE: null, EXAMPLE_CLEAR: null //此处省略其他业务代码 .... })
相关推荐
flx 2020-08-31
ithzhang 2020-06-21
winc 2020-03-03
LaySwift 2019-12-31
第号 2019-11-09
flx 2019-08-25
水龙吟的备忘录 2017-07-12
banana000 2019-07-01
红雪中国 2016-10-08
flx 2019-06-30
凌燕 2019-06-29
BrotherWind 2019-06-28
banana000 2019-06-27
LOGGER.info("compose executed");return stringFlux.map(e -> e + "$");LOGGER.info("flatMap executed&qu
flx 2019-06-27
julykobe 2019-06-27
ShaLiWa 2019-06-27
banana000 2019-06-26
flyfelu 2019-06-26