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
  //此處省略其餘業務代碼
  ....

})