從Flux到Redux詳解單項資料流

牙疼哥哥發表於2019-05-29
Redux

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

一、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;

二、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;

　　

　　

 

相關文章