從Flux到Redux詳解單項數據流

從Flux到Redux是狀態管理工具的演變過程，但二者仍是有細微的區別的。可是最核心的都仍是觀察者模式的應用。

1、Flux

1. Flux的處理邏輯

通俗來說，應用的狀態被放到了store中，組件是store狀態的一個映射，用戶經過事件觸發action，再經過Dispatcher根據不一樣的actionType進行分發，並作不一樣的邏輯處理，但核心都是經過直接改變store的狀態，再觸發emitChange間接改變組件中的數據。（後面會上代碼）

 

從代碼層面來說，store中的數據經過EventEmitter註冊監聽，並通知引入此store的組件狀態變化，view中的數據實時經過store獲取，action中則是經過AppDispatcher分發，而註冊後的AppDispatcher則根據對應的actionTypes作不通的邏輯處理。

常規方法使用Flux須要引入的庫有：Dispatcher，EventEmitter

 

2. Flux的劣勢：

1.Flux能夠有多個store，而當邏輯複雜時，多個store的依賴會很是繁瑣。異步操做也不是很友好。

2. 難以進行服務端渲染，同構成本較高。

3. store混雜了處理邏輯與狀態。

 

3. Flux項目的關聯核心代碼：

js/countPanel.js

類的構造函數初始化store的數據：

constructor (props) {
　　super(props);
　　this.state = {max: 15, fluxData: CounterValues};
　　this.setMax = this.setMax.bind(this);
　　this.totalChange = this.totalChange.bind(this);
　　this.fluxTest = this.fluxTest.bind(this);
}

在事件中調用action

<button onClick={this.fluxTest}>click flux</button>

fluxTest () {
    increment();
}    

./Action.js

import * as ActionTypes from './ActionTypes.js';
import AppDispatcher from './AppDispatcher.js';

export const increment = (counterCaption) => {
　　AppDispatcher.dispatch({
　　　　type: ActionTypes.INCREMENT,
　　　　counterCaption: counterCaption
　　})
}

export const decrement = (counterCaption) => {
　　AppDispatcher.dispatch({
　　　　type: ActionTypes.DECREMENT,
　　　　counterCaption: counterCaption
　　})
}

./AppDispatcher.js

import {Dispatcher} from 'flux';
import * as ActionTypes from './ActionTypes.js';
import CounterStore from './store/CounterStore.js';
let AppDispatcher = new Dispatcher();

AppDispatcher.register((actions) => {
　　if (actions.type === ActionTypes.INCREMENT) {
　　　　// CounterValues[actions.counterCaption]++;
　　　　CounterStore.doChange('First', 1000)
　　　　CounterStore.emitChange();
　　} else if (actions.type === ActionTypes.DECREMENT) {
　　　　// doSomthing
　　}
})
export default AppDispatcher;

./store/CounterStore.js

經過EventEmitter（觀察者模式最典型的應用）註冊數據監聽與處理：

import {EventEmitter} from 'events';
const CounterValues = {
　　First: 0,
　　Second: 10,
　　Third: 30
}
const CounterStore = Object.assign({}, EventEmitter.prototype, {
　　doChange (counterKey, CounterVal) {
　　　　CounterValues[counterKey] = CounterVal;
　　},
　　getCounterValues: function () {
　　　　return CounterValues;
　　},
　　emitChange: function () {
　　　　this.emit('change');
　　},
　　addChangeListener: function (callBack) {
　　　　this.on('change', callBack);
　　},
　　removeChangeListener: function (callBack) {
　　　　this.removeChangeListener('change', callBack)
　　}
})
export {CounterValues};
export default CounterStore;

2、Redux

1. Redux的三條原則：

（1）惟一數據源

（2）保持狀態只讀

（3）經過純函數改變數據

ps： 純函數：1.不得改寫參數 2. 不得調用系統的IO 3. 不能調用Date.now()或Math.random()等方法，由於每次獲取的結果都不一樣。

 

2. Redux的邏輯處理

 

與Flux的區別在於：

（1）Flux中對action的處理沒有返回值，只是經過Dispatcher分發動做，由Dispatcher的註冊函數中作邏輯處理；而Redux中則取消了Dispatcher對象，action只是經過store的dispatch方法提交動做，再由store註冊的reducer根據對應的ActionTypes作邏輯處理。

（2）Flux中的邏輯處理是直接對現有的state作處理，而Redux則是經過純函數進行處理，在原有的state基礎上返回新生成的state，不會對原有數據產生反作用。

 

3. Redux實際使用的核心代碼：

./counter.js

在事件處理函數中經過store.dispatch分發動做：

onIncrement() {
    store.dispatch(Actions.increment(this.props.caption));
}　　

 經過subscribe進行監聽：

componentDidMount() {
   store.subscribe(this.onChange);
}

componentWillUnmount() {
   store.unsubscribe(this.onChange);
}

./action.js

對應的dispatch處理函數中，返回一個action對象：

export const increment = (counterCaption) => {
  return {
    type: ActionTypes.INCREMENT,
    counterCaption: counterCaption
  };
};

./reducer.js

經過純函數處理對應的action

export default (state, action) => {
  const {counterCaption} = action;
  switch (action.type) {
    case ActionTypes.INCREMENT:
      return {...state, [counterCaption]: state[counterCaption] + 1};
    case ActionTypes.DECREMENT:
      return {...state, [counterCaption]: state[counterCaption] - 1};
    default:
      return state
  }
}

./store.js

經過createStore將reducer與store數據聯繫起來

import {createStore} from 'redux';
import reducer from './reducer.js';

const initValues = {
  'First': 0,
  'Second': 10,
  'Third': 20
};

const store = createStore(reducer, initValues);

export default store;