《深入淺出React和Redux》(2) - Redux

Redux是Flux理念的一種實現。

關於Flux理念可以通過類比MVC模式來做簡單理解。 MVC模式中，使用者請求先到達Controller，由Controller呼叫Model獲得資料，然後把資料交給View，按照這種模式，MVC應該也是一個controller->model->view的單向資料流，但是，在實際應用中，由於種種原因，往往會讓view直接操作Model，隨著應用的演進、邏輯變得越來約複雜，view與model之間的關係就會變得錯綜複雜、難以維護。在MVC中讓View和Model直接對話就是災難。 Flux理念可以簡單看作是對MVC添加了更加嚴格的資料流限制。

Flux框架隨React一同被Fackbook推出，但在Dan Abramov建立了Redux後，Redux已經替代了Flux。

基本原則

Flux的基本原則是“單向資料流”, Redux在此基礎上強調三個基本原則：

• 唯一資料來源（Single Source of Truth），應用的狀態資料應該只儲存在唯一的一個Store上，它是樹形結構，每個元件往往只是用樹形物件上一部分的資料，而如何設計Store上狀態的結構，就是Redux應用的核心問題。

• 保持狀態只讀（State is read-only），不能直接修改store狀態，必須要通過派發action物件的方式來進行。

• 資料改變只能通過純函式完成（Changesare made with pure functions）。

這個純函式就是Reducer, Dan Abramov說過，Redux名字的含義就是Reducer+Flux。Reducer是一個很多語言都支援的函式，下面是js中陣列的reduce函式的用法：

[1,2,3,4].reduce(function reducer(accumulation, item){
  return accumulation + item;
}, 0)

reduce函式的第一個引數是reducer, 這個函式把陣列所有元素依次做“規約”，對每個元素都呼叫一次reducer，通過reducer函式完成規約所有元素的功能。

在Redux中，reducer的函式簽名為：

reducer(state, action)

它根據state和action的值產生一個新的state物件返回，reducer是純函式，只負責計算狀態，不會去儲存狀態。

Redux的使用

使用create-react-app建立的模版中不包含redux依賴，首先需要執行npm install redux安裝。

MVC中標準的單向資料流為controller->model->view的，對應地，在React配合Redux後，要觸發view的更新，需要發出一個action，然後reducer根據action來更新store的狀態，最後讓view根據store中最新的資料來更新。

Action

Redux應用習慣上把action型別和action建構函式分成兩個檔案定義，兩者的內容類似這樣： ActionTypes.js

export const INCREMENT="increment";
export const DECREMENT="decrement";

Actions.js 這裡的每個action建構函式都返回一個action物件

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

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

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

Store

Store.js舉例

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;

store的建立要呼叫Redux庫提供的createStore函式：

• 第一個引數為reducer，它負責更新更新狀態
• 第二個引數是狀態的初始值
• 還有第三個引數為Store Enhancer，後面再瞭解

確定Store狀態，是設計好Redux應用的關鍵，其主要原則是：避免冗餘的資料；

Reducer

Reducer.js舉例

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

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;
  }
}

Reducer的主要結構就是if-else或switch語句，根據action.type來執行對應的reduce操作。 ...state為擴充套件操作符語法，將state欄位擴充套件開賦值給一個新的物件，再根據counterCaption修改對應的欄位，這種簡化寫法等同於：

const newState = Object.assign({}, state);
newState[counterCaption]++;
return newState;

擴充套件操作符語法(spread operator)並不是ES6語法，但因其語法簡單而被廣泛使用，babel會負責解決相容性問題。

reducer是純函式，不會修改原有的state，而是操作新複製的state。

View

view程式碼舉例：

import { Component } from 'react';
import PropTypes from 'prop-types';
import store from '../Store.js';
import * as Actions from '../Actions.js'

class Counter extends Component {
  constructor(props) {
    super(props);
    /* bind methods*/

    this.state = this.getOwnState();
  }

  getOwnState() {
    return {
      value: store.getState()[this.props.caption]
    }
  }

  onChange() {
    this.setState(this.getOwnState());
  }

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

  onClickDecrementButton() {
    store.dispatch(Actions.decrement(this.props.caption));
  }

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

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

  render() {
    const { caption } = this.props;
    const value = this.state.value;

    return (
      <div>
        <button style={buttonStyle} onClick={this.onClickIncrementButton}>+</button>
        <button style={buttonStyle} onClick={this.onClickDecrementButton}>-</button>
        <span>{caption} count:{value}</span>
      </div>
    );
  }
}

• store.getState()獲取store上儲存的所有狀態，當前元件只需要獲取自身相關的狀態資訊；
• componentDidMount中，通過store.subscribe監聽store狀態的變化； store狀態變化時，觸發onChange，在這裡會呼叫this.setState觸發view更新；
• 此外還要在componentWillUnmount中取消對store狀態變化的監聽；
• 點選button時，通過store.dispatch分發一個action，這個action由Actions.js中的某個action建構函式產生。

容器元件和展示元件

從前文的Redux示例程式碼可以發現，在Redux框架下，一個React元件基本上就是要完成以下兩個功能：

• 與store相關的職責：
  • 讀取並監聽Store狀態的改變；
  • 當Store狀態變化時，更新元件狀態，驅動元件重新渲染；
  • 當需要更新Store狀態時，派發action物件；
• 根據當前props和state，渲染出使用者介面。

於是考慮將元件一分為二：

• 容器元件：承擔store相關職責
• 展示元件：只關注頁面渲染

展示元件沒有狀態，是一個純函式，只需要根據props來渲染，不需要包含state；

元件Context

但是如果每個元件都拆分為容器元件和展示元件後，由於容器元件要與store打交道，那麼每個容器元件都需要匯入store，最好能只在頂層的元件匯入一次，子元件就都可以用了，不過子元件使用時不是使用props層層傳遞，而是藉助React提供的Context（上下文環境）。

要使用Context需要上下級元件之間的配合，首先來看頂層元件。 在此建立一個Provider元件作為一個通用的Context提供者

import { Component } from 'react';
import PropTypes from 'prop-types';

class Provider extends Component {
  getChildContext() {
    return {
      store: this.props.store
    };
  }

  render() {
    return this.props.children;
  }
}

Provider.childContextTypes = {
  store: PropTypes.object
}

Provider.propTypes = {
  store: PropTypes.object.isRequired
}

export default Provider;

這個元件作為父元件使用：

···
import store from './Store.js';
import Provider from './Provider.js';

ReactDOM.render(
  <Provider store={store}>
    <ControlPanel />
  </Provider>,
  document.getElementById('root')
);

頂層的Provider元件，通過Provider.childContextTypes來宣稱自己支援context，並且提供getChildContext函式來返回代表Context的物件，Context物件中儲存的值實際上是index.js匯入的store，作為props傳遞給了Provider。這樣就實現了只在index.js匯入store一次。 Provider元件還會通過this.props.children把子元件渲染出來。

然後它子孫元件，只要宣稱自己需要這個context，就可以通過this.context訪問到這個共同的環境物件。就像這樣：

SummaryContainer.contextTypes = {
  store: PropTypes.object
}

另外，建構函式也要傳遞context：

constructor(props, context) {
  super(props, context);
  ···
}

這裡可以進一步簡化為：

constructor() {
  super(...arguments);
  ···
}

React-Redux

以上過程從兩個方面改進了React應用：

• 把元件拆分為容器元件和展示元件
• 所有元件都通過Context來訪問store

實際上使用react-redux庫可以代替上面的大部分工作了，不過通過前面一步步的改進過程可以瞭解其中的原理。

引入react-redux後，程式碼相比之前會更加簡潔。 首先在index.js修改為從react-redux匯入Provider：

import {Provider} from 'react-redux';

在子元件中，容器元件部分也交給react-redux來建立，我們只需編寫展示元件部分，並定義好mapStateToProps和mapDispatchToProps。 之前在容器元件有定義getOwnState方法，將store上的狀態轉化為展示元件的props

getOwnState() {
  return {
    value: this.context.store.getState()[this.props.caption]
  }
}

mapStateToProps也是同樣的作用：

function mapStateToProps(state, ownProps) {
  return {
    value: state[ownProps.caption]
  }
}

容器元件還定義了點選是分發action的函式，

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

onClickDecrementButton() {
  this.context.store.dispatch(Actions.decrement(this.props.caption));
}

mapDispatchToProps的也是同樣的作用，將dispatch傳遞給展示元件的props，供其主動觸發：

function mapDispatchToProps(dispatch, ownProps) {
  return {
    onIncrement: () => {
      dispatch(Actions.increment(ownProps.caption));
    },
    onDecrement: () => {
      dispatch(Actions.decrement(ownProps.caption));
    }
  }
}

mapStateToProps和mapDispatchToProps會作為引數傳遞給react-redux的connect

export default connect(mapStateToProps, mapDispatchToProps)(Counter);

connect函式的執行結果還是一個函式，然後把展示元件Counter作為引數呼叫這個函式，這個過程就類似於之前的容器元件巢狀展示元件。

參考書籍

《深入淺出React和Redux》 程墨