實例講解基於 React+Redux 的前端開發流程

時間 2019-11-05

標籤實例講解基於 react+redux react redux 前端開發流程欄目 React 简体版

原文原文鏈接

前言：在當下的前端界，react 和 redux 發展得如火如荼，react 在 github 的 star 數達 42000 +，超過了 jquery 的 39000+，也即將超過前幾年比較火的angular 1 的 49000+；redux 的 star 數也要接近 20000，可見你們對其的熱情程度，到底是什麼魔力讓你們爲之瘋狂呢？讓咱們上車，親自體驗一波試試~~本文章偏向於講解redux流程。css

宅印前端基於 react + redux 的模式開發，咱們指定了一套分工明確的並行開發流程。下面經過一個 「蘋果籃子」 實例，來看看整個應用開發流程。html

很是感謝 @ckinmind 爲本教程提供完整源碼demo
完整源碼： https://github.com/ckinmind/a...
實例體驗 https://ckinmind.github.io/ap...
(摘蘋果的過程模擬請求網絡，體現一個異步動做，因此響應看起來有些延遲)

更優雅的方式：若是你想更優雅地使用 react + redux ，歡迎查看個人最新系列文章 pastate.js 響應式 react 框架。前端

首先，咱們來看看這個實例的原型：react

看到這個水果籃子的樣子，你們應該能夠明白它的功能：你能夠作兩件事 -- 摘蘋果和吃蘋果。當你摘蘋果時，應用會向後臺發送ajax請求索取蘋果，每一個蘋果有兩個屬性：編號和重量。當你吃蘋果掉時，不用告訴後臺，在前端偷偷吃掉就好啦~ 同時蘋果籃子會顯示當前的蘋果量和已經吃掉的蘋果量。好！那下面咱們來開工！jquery

下面先來整體瞭解一下 redux 應用的基本原理，一圖勝千言：webpack

可見整個redux流程的邏輯很是清晰，數據流是單向循環的，就像一個生產的流水線：git

store（存放狀態） -> container（顯示狀態） -> reducer （處理動做）-> store

這一點對精細化分工協做頗有好處。es6

咱們來看看這三個概念：github

store 是應用的狀態管理中心，保存着是應用的狀態（state），當收到狀態的更新時，會觸發視覺組件進行更新。
container 是視覺組件的容器，負責把傳入的狀態變量渲染成視覺組件，在瀏覽器顯示出來。
reducer 是動做(action)的處理中心，負責處理各類動做併產生新的狀態（state），返回給store。

NOTE：從對象的包含關係上講，reducer 是store的一部分，但在邏輯上咱們把它分出來，這樣會比較容易理解整個redux流程。web

咱們能夠作個形象的比喻，把 js 比喻成巴士，把 store, container, reducer 比喻爲三個車站，再把 state 和 action 比喻成兩種乘客。這是一趟環路巴士：

js巴士 從 store車站 出發，載上 state乘客 ，state乘客 到達某個 container車站 下車並把本身展現出來
過了一會，有一個 action乘客 上車了，js巴士 把 action乘客 送到 reducer車站，在這裏 action乘客 和 state乘客 生了一個孩子 new state，js巴士把 new state 送回了 store車站（好像是人生輪迴→_→）

redux 只是定義了應用的數據流程，只解決了「數據層」（model layer）的問題，通常還會使用 react， angular 等做爲「顯示層」（UI layer）來一塊兒使用，咱們項目採用 react 做爲顯示框架。

在開始以前，這裏先提供一些介紹react和redux的參考資料，若是在下文遇到哪些點不理解，能夠來這裏翻看參考資料：

react相關： react官網, react中文站點, 阮一峯react 入門, react教程集合
redux相關：redux官網 , redux中文文檔

下文的展現的js代碼，會用到少許簡單的 es6 語法，能夠在遇到時參考這裏，或本身查找資料：

import / export ：es6代碼模塊化模式
let 聲明語句：塊級變量聲明語句
箭頭函數： (..) => {..} 形式的函數

咱們會使用 babel 編譯器把es6語法編譯成es5, 因此你們沒必要擔憂瀏覽器兼容性問題，能夠大膽使用es6。

應用的基礎配置工做由前端開發主管負責，你們沒必要詳細理解。

按任務分工來分步講解

按照開發的內容，咱們把前端團隊分爲兩個小組：「佈局組」和「邏輯組」，每一個小組有2種任務，一共4種任務。

佈局組 - 負責 contianer、component 部分
- 任務1：靜態佈局 - 使用 HTML + CSS 靜態佈局
- 任務2：動態佈局 - 使用 JSX 語法對靜態佈局作動態渲染處理
邏輯組 - 負責 action、reducer 部分
- 任務1：action 開發 - 製做 redux 流程的 action
- 任務2：reducer 開發 - 製做 redux 流程的 reducer

佈局組 要求對 HTML + CSS 佈局比較熟悉，只須要會簡單的 js 便可，不須要完整地理解redux流程。
邏輯組 要求對 js 比較熟悉，最好能夠比較完整地理解redux流程，但基本不須要涉及HTML + CSS佈局工做。

接下來，先給出咱們教程相關的 src 目錄。這裏你們能夠先一掃而過，大概瞭解便可

- src              源碼文件夾：包含項目源碼，咱們基本都在這個文件夾下作開發
    - containers   容器文件夾：存放容器組件，好比 「蘋果籃子」
    - components   組件文件夾：存放普通顯示組件，好比 「蘋果」
    - actions      actions文件夾：存放能夠發出的action 
    - reducers     reducers文件夾：存放action的處理器reducers
    - services     服務文件夾：存放通過封裝的服務，如 ajax服務, 模擬數據服務
    - styles       樣式文件夾：存放應用的樣式，如css, scss
    - images       圖片文件夾：存放圖片資源
    - apis         開發接口文件夾：存放開發接口文檔

下面正式開始啦，先從佈局組開始。

佈局組

任務1：靜態佈局

能力要求：只須要會使用 HTML + CSS （SASS）進行佈局便可
任務內容：1. 蘋果籃子組件（容器組件） 2. 水果組件（顯示組件）

redux 的組件分爲兩類，一類是容器組件 container ，一類是普通顯示組件 component。容器負責接收store中的state和併發送action, 大多數時候須要和store直接鏈接，容器通常不須要屢次使用，好比咱們這個應用的蘋果籃子。普通組件放在容器裏面，由容器肯定顯示的時機、數量和內容，普通組件通常會屢次使用。

1. 蘋果籃子容器 AppleBasket.jsx + appleBasket.scss

蘋果籃子組件的原型以下：

對於容器，咱們使用 React 組件類的方式書寫，這裏主要是靜態的jsx代碼，至關於html。

下面是 AppleBasket.jsx

import React from 'react';
import { connect } from 'react-redux';

class AppleBusket extends React.Component {
  
  render(){
    return (
      <div className="appleBusket">
        <div className="title">蘋果籃子</div>
        
        <div className="stats">
            <div className="section">
                <div className="head">當前</div>
                <div className="content">0個蘋果，0克</div>
            </div>
            <div className="section">
                <div className="head">已吃掉</div>
                <div className="content">2個蘋果，480克</div>
            </div>            
        </div>
                    
        <div className="appleList">
            <div className="empty-tip">蘋果籃子空空如也</div>
        </div>
        
        <div className="btn-div">
            <button>摘蘋果</button>
        </div>
        
      </div>
    );
  }

}

export default connect()(AppleBusket);

同時靜態佈局開發人員還要負責書寫樣式，宅印的樣式使用sass 書寫，下面是的例子是appleBasket.scss , 你們能夠作參考：

.appleBusket{
    width: 400px;
    margin: 20px;
    border-radius: 4px;
    border: 1px solid #ddd;
    >.title{
        padding: 6px 0px;
        text-align: center;
        color: #069;
        font-size: 20px;
        //font-weight: 600;
    }
    >.stats{
        width: 100%;
        $border: 1px dashed #ddd;
        border-top: $border;
        border-bottom: $border;
        padding: 10px 0px;
        .section{
            display: inline-block;
            width: 50%;
            padding-left: 8px;
            .head{
                padding: 6px 0px;
                font-size: 16px;
                color: #069;
            }
            .content{
                font-size: 20px;
                font-weight: 200;
            }
            &:first-of-type{
                border-right: 1px solid #f0f0f0;
            }
        }
    }
    >.appleList{
        padding: 10px 0px;
        .empty-tip{
            text-align: center;
            font-size: 16px;
            color: #ccc;
            padding: 20px 0px;
        }
    }
    >.btn-div{
        text-align: center;
        button{
            color: #fff;
            background-color: #096;
            border: none;
            font-size: 14px;
            padding: 6px 40px; 
            border-radius: 6px;
            margin: 20px auto;
        }
    }
}

2. 蘋果組件 AppleItem.jsx + appleItem.scss

蘋果組件的樣子以下：

普通組件的定義方法和容器相似，只是其不須要使用redux鏈接器來封裝，以下：

AppleItem.jsx

import React from 'react';

class AppleItem extends React.Component {

    render() {

        return (
            <div className="appleItem">
                <div className="apple"><img src="../images/apple.png" alt=""/></div>
                <div className="info">
                    <div className="name">紅蘋果 - 1號</div>
                    <div className="weight">265克</div>
                </div>
                <div className="btn-div"><button>吃掉</button></div>
            </div>
        );

    }


}

export default AppleItem;

樣式文件 appleItem.scss 在此省略。

哪些顯示元素要做爲容器，哪些要做爲普通組件，沒有百分之百肯定劃分規則，你們根據本身的理解把它劃分到某一類便可。

這些就是任務一的內容，書寫靜態佈局，基本都是html+css工做，不須要涉及js代碼。

任務2：動態渲染

寫完了靜態佈局後，接下來要進行動態渲染啦~

動態渲染聽起來很高大上，其實意思就是根據一個stete數據對象來顯示內容而已。首先須要肯定其state的結構。容器的state 是 store 中state的一部分，前端管理員會事先約定好其數據結構，並在對應的reducer中給出，只要去那裏複製一份出來便可。普通組件的state只要本身定義便可，並在文件中說明清楚。

1. 容器的動態渲染

下面看看「蘋果籃子」的動態佈局，咱們去 appleBasketReducer.js 能夠獲得水果籃子的 state 的結構以下：

{
    isPicking : false,
    newAppleId: 1,
    apples: [
        /*{
            id: 0,
            weight: 235,
            isEaten: false
         }*/
    ]
}

咱們這個數據結構把它「實例化」，以下這樣放在咱們改爲寫的 AppleBasket.jsx 中，而後咱們開始書寫咱們的動態渲染代碼啦，以下：

import React from 'react';
import { connect } from 'react-redux';

import AppleItem from '../components/AppleItem';

class AppleBusket extends React.Component {

    render() {
        
        let { state } = this.props;
        
        //這部分從對應的 appleBasketReducer.js 中拷貝
        let mockState = {
            isPicking : false,
            newAppleId: 3,
            apples: [
                {
                    id: 1,
                    weight: 235,
                    isEaten: true
                },
                {
                    id: 2,
                    weight: 256,
                    isEaten: false
                }
            ]
        };
        
        //是否開啓模擬數據的開關，註釋這行代碼關閉模擬數據
        state = mockState;
        
        
        //對 state 作顯示級別的轉化
        let stats = {
            appleNow: {
                quantity: 0,
                weight: 0
            },
            appleEaten: {
                quantity: 0,
                weight: 0
            }
        };
        
        state.apples.map(apple => {
            let selector = apple.isEaten ? 'appleEaten':'appleNow';
            stats[selector].quantity ++;
            stats[selector].weight += apple.weight;
        })
        
        
        return (
            <div className="appleBusket">
                <div className="title">蘋果籃子</div>

                <div className="stats">
                    <div className="section">
                        <div className="head">當前</div>
                        <div className="content">
                            {stats.appleNow.quantity}個蘋果，
                            {stats.appleNow.weight}克
                        </div>
                    </div>
                    <div className="section">
                        <div className="head">已吃掉</div>
                        <div className="content">
                            {stats.appleEaten.quantity}個蘋果，
                            {stats.appleEaten.weight}克
                        </div>
                    </div>
                </div>

                <div className="appleList">
                    { state.apples.map(apple => <AppleItem state ={apple} />) }
                </div>

                <div className="btn-div">
                    <button>摘蘋果</button>
                </div>

            </div>
        );
    }

}

function select(state) {
    return {
        state: state.appleBusket
    }
}

export default connect(select)(AppleBusket);

可見，動態佈局的工做要求只是在 HTML + CSS 佈局的基礎上，再加上 JSX 語法能力便可。

2. 普通顯示組件的動態渲染

普通顯示組件的動態渲染和容器相似，只是這裏的state能夠本身規定，並給出示例的mockState（模擬state），使用組件的人按照示例傳入數據便可使用。

AppleItem.jsx 的更新以下：

import React from 'react';

class AppleItem extends React.Component {

    shouldComponentUpdate(nextProps) {
        return nextProps.state != this.props.state;
    }

    render() {

        let { state, actions } = this.props;

        /**
         * 這個區域是 mock 數據區，也做爲組件文檔，請書寫清楚
         * //在組件發佈時，請註釋掉，提升性能
         */
        let mockState = {
            id: 1,
            weight: 256,
            isEaten: false
        };
        
        let mockActions = {
            eatApple : id => console.log('eatApple',id)
        };

        /**
         * 開關這行代碼，用於切換裝入的數據來源。(爲了開關的方便，請把兩句代碼合成一行)
         * 在開發階段打開，使用內部 state 和 action, 開發完成後請註釋關閉
         */
        state = mockState; actions = mockActions;

        if (state.isEaten) return null;

        return (
            <div className="appleItem">
                <div className="apple"><img src="../images/apple.png" alt=""/></div>
                <div className="info">
                    <div className="name">紅蘋果 - {state.id}號</div>
                    <div className="weight">{state.weight}克</div>
                </div>
                <div className="btn-div"><button onClick={() => actions.eatApple(state.id) }>吃掉</button></div>
            </div>
        );

    }


}

export default AppleItem;

容器和普通顯示組件state的對比：

容器的state咱們是從store中的總state直接得到的，注意 AppleBusket.jsx 靠後面這段代碼：
```
function select(state) {
    return {
        state: state.appleBusket
    }
}
```
select是一個state篩選器, 功能是選擇總state中的 appleBusket 做爲本容器的state。而這個state的格式咱們會在其對應的reducer中規定（由於咱們須要在reducer中提供對應state的默認值）
普通顯示組件的state格式由組件開發人員本身約定便可，並在mockState 區域給出例子。當別人要使用你的顯示組件時，必須根據你規定的格式傳入state數據。在組件裏面，咱們通常會實現以下這樣一個自動切換器，當組件的使用者在使用該組件時沒有傳入state, 就會顯示內部的模擬state，爲使用者帶來預覽效果。
```
if(state === undefined)  state = mockState;
```

以上就是佈局組的開發工做：靜態佈局 + 動態佈局。前者只須要會html+css佈局便可，後者還要會一些jsx的語法和基本的js語法。

邏輯組

任務1：action 開發

任務內容：開發 redux 流程的 action，並把action部署到對應容器和組件中。
技能要求：須要對js比較熟悉，並要求要會使用jq的ajax功能。

首先，咱們先來看看 action 的定義。

1. 狹義的 action

狹義的action是指一個簡單的對象，對象的結構以下，只要在對象內包含type屬性指明action的名稱便可，同時，在對象的其餘屬性裏，能夠以任何形式自由保存其餘相關數據。

let action = {
    type: 'ACTION_NAME',
    ...
}

通常 type 的內容使用大寫字母+下劃線的格式。

在這個定義的基礎上，業界提出以一種標準 action，叫作 Flux Standard Action , 該標準下的action除了type屬性以外，只容許多加（不是必須包含）這三個屬性：payload，error，meta。

let FSA = {
    type: 'ACTION_NAME',
    payload: <bool | number | string | object>, //action的負載，能夠是數據或 error 對象
    error: <bool>, // 指明該action是不是一個以 error 爲負載的action
    meta: <string> // action元數據， 包含解釋該action含義的信息
}

咱們宅印約定都要使用 Flux Standard Action，下面是吃蘋果 action：

let FSA = {
    type: 'EAT_APPLE',
    payload: 3, // 負載是3, 說明吃掉3號蘋果， 這裏也能夠寫成 { id : 3 }
    meta: 'This action will eat an apple!' // (不是必須的)
}

一個action只是一個對象，他須要根據時機被 store 的 dispatch 函數調用纔會開始進行處理：store.dispatch(action_1)。

2. 廣義的 action

廣義的 action 是指在中間件的支持下，dispatch 函數能夠調用的數據類型，除了普通action以外，常見的有 thunk, promise 等。咱們用經常使用的 thunk來舉個例子。

thunk 其實就是一個代碼片斷，能夠簡單理解爲一種特定的函數，咱們能夠dispatch 這個thunk。 thunk函數具備以下的簽名

(dispatch, getState) => { 
    //在函數體內可使用 dispatch 方法來發射其餘 action
    //在函數體內可使用 getState 方法來獲取當前的state
}

下面是一個咱們摘蘋果動做的例子：

let pickAppleAction = (dispatch, getState) => { 
    ajax({
        url: '/pickApple',
        method: 'GET',
    }).done(data => {
        //發射普通 action
        dispatch({
            type: 'DONE_PICK_APPLE',
            payload: data.weight // 或者 payload: {weight: data.weight}
        }); 
    }).fail(xhr => {
        //發射普通 action, 其負載是一個error
        dispatch({
            type: 'FAIL_PICK_APPLE',
            payload: new Error(xhr.responseText) ,
            error: true
        }); 
    })
}

定義好以後，咱們能夠直接這樣調用這個thunk：

dispatch( pickAppleAction )

接下來，咱們來作進一步優化，把action統一爲actionCreator , 咱們不難察覺，每次都要書寫{ type: 'ACTION_NAME' ... } 是很麻煩也很容易出錯的，actionCreator 就是爲解決這個問題而生的，actionCreator 就是一個產生特定action（這裏指廣義的action）的函數，下面來看簡單的actionCreator 例子：

//傳統寫法
var eatApple = function(id) {
    return {
        type: 'EAT_APPLE', 
        payload: id
    }
}

// es6 寫法
let eatApple = id => ({
    type: 'EAT_APPLE', 
    payload: id
})

這樣一來，一方面是使用起來比較簡單方便，另外一方面是具備文檔做用。
只須要這樣發射action就能夠啦：

dispatch(eatApple(3))

普通action的actionCreator封裝工做, 可使用 redux-actions 自動完成, 查看其文檔就能夠快速上手，能夠根據狀況使用。

在項目中，咱們會爲每一個板塊寫一個的action文件，並統一使用actionCreator, 因此最終 appleAction.js 以下：

import ajax from '../services/ajax'; //通過封裝的增強型 ajax 函數

//這是名空間，對普通action作劃分
const prefix = 'apple/';

let actions = {

    //注意這裏須要 () => ... , 否則 pickAppleAction 不是一個actionCreator, 而是一個thunk
    pickApple: () => (dispatch, getState) => {
        
        //若是正在摘蘋果，則結束這個thunk, 不執行摘蘋果
        if(getState().isPicking)
            return;
        
        //通知開始摘蘋果
        dispatch(actions.beginPickApple());
        
        //發送摘蘋果請求
        ajax({
            url: '/appleBasket/pickApple',
            method: 'GET'
        }).done(data => {
            dispatch(actions.donePickApple(data.weight))
        })
        .fail(xhr => {
            dispatch(actions.failPickApple(xhr.responseText));
        })
    },
    
    beginPickApple: () => ({
        type: 'apple/BEGIN_PICK_APPLE'
    }),
    
    donePickApple: appleWeight => ({
        type: 'apple/DONE_PICK_APPLE',
        payload: appleWeight
    }),
    
    failPickApple: errMsg => ({
        type: 'apple/FAIL_PICK_APPLE',
        payload: new Error(errMsg),
        error: true
    }),
    
    eatApple: appleId => ({
        type: 'apple/EAT_APPLE',
        payload: appleId
    })

};

export default actions;

這樣一來，只要引入 appleAction.js ，就能夠快速使用定義好的action，結合某些編輯器的智能提示功能，很是方便，下面是 vsCode 編輯器的效果：

寫好了action以後，只要在 container 的對應位置裝上action就行了, 下面是appleBasket.jsx 整體代碼:

import React from 'react';
import { connect } from 'react-redux';

import AppleItem from '../components/AppleItem';
import actions from '../actions/appleActions';

class AppleBusket extends React.Component {
    render() {
        let { state, dispatch } = this.props;
        ...
        return (
          ...
          <div className="appleList">
              { state.apples.map(apple =>
                  <AppleItem
                      state ={apple}
                      actions={{eatApple: id => dispatch(actions.eatApple(id))}}
                      key={apple.id}
                  />
              ) }
          </div>

          <div className="btn-div">
              <button onClick={() => dispatch(actions.pickApple())}>摘蘋果</button>
          </div>
          ...
       )
    }
}

function selectState(state) {
    return {
        state: state.appleBusket
    }
}
export default connect(selectState)(AppleBusket);

注意這兩行。就是裝入action的地方

actions={{eatApple: id => dispatch(actions.eatApple(id))}}
<button onClick={() => dispatch(actions.pickApple())}>摘蘋果</button>

上面代碼中引入的actions實際上是actionCreators。

此外，actionCreator還有很簡潔的用法：對actionCreator作dispatch級別的封裝，這個過程咱們可使用 redux 提供的 bindActionCreators 函數自動完成。而後就能夠直接調用action，而不須要使用dispatch方法去調用actionCreator。看下面更新後的代碼：

import React from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';

import AppleItem from '../components/AppleItem';
import actions from '../actions/appleActions';

class AppleBusket extends React.Component {
    render() {
        let { state, actions} = this.props;
        ...
        return (
          ...
          <div className="appleList">
              { state.apples.map(apple =>
                  <AppleItem
                      state ={apple}
                      actions={{eatApple: actions.eatApple}}
                      key={apple.id}
                  />
              ) }
          </div>

          <div className="btn-div">
              <button onClick={actions.pickApple}>摘蘋果</button>
          </div>
          ...
       )
    }
}

function selectState(state) {
    return {
        state: state.appleBusket
    }
}

function buildActionDispatcher(dispatch) {
  return {
      actions: bindActionCreators(actions, dispatch)
    }
}

export default connect(selectState, buildActionDispatcher)(AppleBusket);

注意這三個變更：

let { state, actions } = this.props;
actions={{eatApple: actions.eatApple }}
<button onClick={actions.pickApple}>摘蘋果</button>

咱們對比一下以前的寫法：

let { state, dispatch } = this.props
actions={{eatApple: id => dispatch(actions.eatApple(id))}}
<button onClick={() => dispatch(actions.pickApple())}>摘蘋果</button>

能夠發現使用新的方式使代碼簡潔了不少！

可是，這對於有對象屬性提示功能編輯器來講，這種方式會使編輯器沒法分析對象屬性：

這時，須要一邊看actions文件對該actions對象的定義，一邊在目標位置填入action，不過這也不是很麻煩。並且對於使用沒有對象屬性提示的編輯器的開發者來講，這個 drawback 根本就不存在。咱們相對推薦使用這種通過dispatch封裝的action, 但不要求，你們根據本身的狀況使用便可。

對於普通顯示組件

對於普通顯示組件的actions傳遞方式，咱們統一使用actions屬性傳遞，以下：

AppleBasket.jsx

...
<AppleItem
    state ={apple}
    actions={{eatApple: actions.eatApple }}
    key={apple.id}
/>
...

AppleItem.jsx

...
<button onClick={() => actions.eatApple(state.id)}>吃掉</button>
...

普通顯示組件使用統一actions屬性接受父級的action，能夠在組件內部創建mockActions, 這個mockActions 既有文檔功能，也有測試功能，很是實用：

let mockActions = {
    eatApple : id => console.log('eatApple',id), //指定了函數的簽名
    foo: (arg1,arg2) => console.log('foo',arg1,arg2) //也響應了調用測試
};

/**
  * 開關這行代碼，用於切換裝入的state和actions來源。(爲了開關的方便，請把兩句代碼合成一行)
  * 在開發階段打開，使用內部 state 和 action, 開發完成後請註釋關閉
  */
state = mockState; actions = mockActions;

點擊「摘蘋果」和「吃掉」按鈕，咱們看看控制檯，已經能夠發出咱們想要的action啦：

好啦，actions 開發的內容就介紹到這裏。咱們來總結一下咱們對action所作的封裝：

action -> actionCreator -> actionDispatcher

任務2：reducer 開發

開發內容： reducer的其實就是action的處理器。其開發的內容很明確清晰，就是開發一類函數，接受action 和當前的state，返回新的state。

技術要求：要求對js比較熟悉，須要會使用 immutable.js 這個數據靜態化庫。

下面是reducer功能的圖解：

咱們先看看咱們蘋果板塊的state的數據結構，很是簡單，這裏是某個時刻的狀態：

{
    isPicking : false,
    newAppleId: 1,
    apples: [
        {
            id: 0,
            weight: 235,
            isEaten: false
        }
    ]
}

有三個一級屬性：

isPicking ：表示是否正在摘蘋果，咱們在上面已經知道，摘蘋果實際上是發送一個ajax請求，向後臺摘一個蘋果，這個請求在進行時咱們會把 isPicking 設置爲ture, 代表正在摘蘋果，同時禁止在完成前再發送摘蘋果請求
newAppleId：表示新蘋果的編號
apples：是蘋果列表數組，存放着蘋果對象，蘋果對象的結構在apples數組裏有給出實例。

咱們上面說起actions分爲廣義的action和狹義的普通action。其實，非普通action, 如thunk，通常會以發起普通action結束。咱們reducer只須要處理狹義上的普通action,。在咱們摘蘋果應用裏，總共有這4個普通action:

//通知store應用開始摘蘋果
beginPickApple: () => ({
    type: 'apple/BEGIN_PICK_APPLE'
}),

//摘蘋果成功    
donePickApple: appleWeight => ({
    type: 'apple/DONE_PICK_APPLE',
    payload: appleWeight
}),

//摘蘋果失敗    
failPickApple: error => ({
    type: 'apple/FAIL_PICK_APPLE',
    payload: error,
    error: true
}),

//吃蘋果
eatApple: appleId => ({
    type: 'apple/EAT_APPLE',
    payload: appleId
})

下面是根據action，寫出的 reducer 的基本結構：

(state = defaultState, action) => {

    switch (action.type) {
        case 'apple/BEGIN_PICK_APPLE':
            //TODO
            return state;
            
        case 'apple/DONE_PICK_APPLE':
            //TODO
            return state;
            
        case 'apple/FAIL_PICK_APPLE':
            //TODO
            return state;
            
        case 'apple/EAT_APPLE':
            //TODO
            return state;
            
        default:
            return state;
    }
  
};

咱們能夠看到，reducer是一個函數，接受state和action兩個參數，在函數內部，根據 action.type 來肯定要作哪些操做，而且每種操做都要返回state（或者是新的，或者是原來的）。

咱們以 apple/EAT_APPLE動做爲例，講解如何書寫reducer。EAT_APPLE 動做的含義是吃蘋果，咱們能夠很是簡單地處理這個動做：直接把對應蘋果對象的 isEaten 屬性設爲true便可。

按照通常的思惟，咱們會這樣處理：

...
    case 'apple/EAT_APPLE':
        state.apples[action.payload].isEaten = true;
        return state;
...

可是，這種方法在 redux 應用裏看不到做用，由於這種寫法不會使store觸發react進行從新渲染，爲何呢？由於 newState == oldState ! 下面咱們來作一些解釋：

首先，要先從js對象的相等判斷運算提及，咱們看下面的代碼

let a = { foo: 'bar'};
let b = { foo: 'bar'};
console.log( a == b ); //結果是 false

a 和 b 看起來同樣，但爲何是false呢？由於對象和數組的賦值是引用賦值， a 和 b 只是一個引用符號，其所指向的對象實體不一樣（好比 a -> object#001, b -> object#002），js的對象（數組）相等判斷是根據是否指向同一個對象實體來的肯定的 (object#001 ？= object#002 // false)，詳見 MDN。

再看看下面的例子：

let a = {foo: 'bar'};
let b = a;
b.foo = 'good';

console.log( a == b ); //結果是 true

如今應該能夠理解剛纔爲何newState == oldState了吧~

redux 是根據返回的state是否改變來決定是否通知 react 更新的。根據這種狀況所，可能有人會這樣改進剛纔的reducer：

state.apples[action.payload].isEaten = true;
    newState = Object.assign({},state);
    return newState;

這樣一來，點擊「吃掉」按鈕，看到了有效果了，蘋果不見了！可是，這種寫法只是迎合了redux更新視覺組件的觸發條件，還具備很大的侷限性，不是咱們redux規定的reducer。下面咱們來看看正確的reducer：

首先，reducer有這樣的重要約束：在reducer裏，不能夠修改原來的state，須要保持使每一個版本的state不變。

這種保持數據不變（Persistent data structure）的方式在函數式編程（Functional programming）很是常見。在咱們的redux應用裏，其意義在於：

1. 調試意義：保持每一個版本的state的不變性，使得咱們能夠跟蹤每一個時刻的state, 跟蹤應用的「發展史」，這個特性爲調試帶來了很大的方便。

2. 性能意義：保持state不變這個約束引導咱們使用局部更新對象的方法，這樣會能夠很是有效地提升react或其餘顯示框架的渲染效率。咱們先來看看爲了保持數據不變性，要怎麼對state作更新，以咱們的蘋果籃子state爲例：

例子：通知開始摘蘋果：apple/BEGIN_PICK_APPLE

爲了保證每一個版本的state不變性，咱們有兩種實現方式：「深複製」，「淺複製」。咱們來看兩種模式的內部原理：

深複製方式：有人會這樣想：「保持state的不變性很容易，只須要深複製一個state, 讓後在新的state要怎麼修改就怎麼修改，不ok了嗎？」，以下就是深複製

這種方式是一種很低級保持不變性的方式：

深複製操做運行效率低
沒有爲渲染環節提供提升渲染效率的鋪墊

它只是簡單迎合保持數據不變性的約束，雖然有必定調試意義，可是，不但沒有提升程序的性能，反而下降了程序的整體性能！沒有實踐意義。

淺複製方式：淺複製模式只對內部數據發生變化的引用作更新，以下

「state」對象的內部數據發生變化，因此建立新的state引用；而apples array 內部數據不發生變化，因此就不對該引用作更新！在這個操做中，這種淺複製的方法運行效率比較高，並且其簡單地實現了數據不變性，爲調試帶來方便，同時，也是更重要的，這種淺複製的方式極大地提升了視覺組件渲染階段的運行效率！咱們來對比一下：當用戶點擊摘蘋果時，若是使用「深複製」，渲染程序須要從新遍歷整個state對象樹來作視覺更新，而使用淺複製來實現數據不變性時，渲染程序只須要遍歷state對象的一級子節點便可，而不須要對apples array 作遍歷，性能大大地提升。尤爲是當蘋果不少的時候，兩種方式的性能差距是很是明顯的。

備註：在react組件裏面，要開啓條件更新這個生命週期函數 shouldComponentUpdate，纔會對把這個性能提升點釋放出來，相似這樣：

...
shouldComponentUpdate(nextProps) {
    return nextProps.state != this.props.state;
}
...

下面咱們再給出「吃蘋果」 reducer 進行淺複製的例子：

如今你們應該理解了用淺複製實現數據不變性的原理和意義了，下面咱們來看具體的代碼實現。

咱們的代碼用 es6 編寫，這裏要用到 es6 兩個很是方便的特性：

Obejct.assign() 方法，該方法用於產生新的對象
延展操做符 Spread operator : ...

你們能夠稍微看一下文檔，或者看我下面的例子就知道其用法了：

// apple basket reducer

export default (state = {
    isPicking: false,
    newAppleId: 1,
    apples: [
        {
            id: 0,
            weight: 235,
            isEaten: false
        }
    ]
}, action) => {
    
    let newState ;
    

    switch (action.type) {
        case 'apple/BEGIN_PICK_APPLE':
            newState = Object.assign({}, state, {
                isPicking: true
            });
            return newState;

        case 'apple/DONE_PICK_APPLE':
            newState = Object.assign({}, state, {
                apples: [
                    ...state.apples,
                    {
                        id: state.newAppleId,
                        weight: action.payload,
                        isEaten: false
                    }
                ],
                newAppleId: state.newAppleId + 1,
                isPicking: false
            })
            return newState;

        case 'apple/FAIL_PICK_APPLE':
            //這裏只是簡單處理
            newState = Object.assign({}, state, {
                isPicking: false
            });
            return newState;

        case 'apple/EAT_APPLE':
            newState = Object.assign({}, state, {
                apples: [
                    ...state.apples.slice(0, action.payload),
                    Object.assign({}, state.apples[action.payload], { isEaten: true }),
                    ...state.apples.slice(action.payload + 1)
                ]
            })
            return newState;

        default:
            return state;
    }

};

你們會發現這種淺複製操做在開發的過程會複雜一點，因而就有了 immutable.js 這個專門處理不變性數據的庫(也是facebook出品)，它可使用相似賦值的方式生成淺複製的不變性數據，下面來看看它怎麼簡化咱們的開發：

咱們用 apple/EAT_APPLE 這個reducer來講明。

這是原來的 reducer：

...
case 'apple/EAT_APPLE':
    newState = Object.assign({}, state, {
        apples: [
            ...state.apples.slice(0, action.payload),
            Object.assign({}, state.apples[action.payload], { isEaten: true }),
            ...state.apples.slice(action.payload + 1)
        ]
    })
    return newState;
...

這是使用 immutable.js 庫的reducer :

import { fromJS } from 'immutable';
...
case 'apple/EAT_APPLE':
    return fromJS(state).setIn(['apples',action.payload,'isEaten'], true).toJS();
...

用了immutable.js後，輕鬆一行代碼搞定！若是團隊約定 state 都用 immutable 內部的數據類型，就能夠連 fromJS 和 toJS 的轉化都省了，超級方便！

到這裏， reducer 任務的介紹就結束啦~

總結

至此，咱們四個任務都介紹完了，你們應該對redux流程有必定概念了，咱們來回顧一下咱們的4個任務：

這樣子，咱們經過流程化把 react + redux 的主要流程都定義好了，這種模式的可構建性很高，能夠構建很是複雜的單頁面應用，不會由於應用的業務複雜性增長而增長開發複雜性。

而且在這種分工裏面，佈局組對專一於寫樣式佈局，大可能是基本的HTML+CSS 工做；邏輯組專一於開發應用邏輯，基本都是JS工做，分工獲得很是明確的規劃，人們能夠更好地作精本身負責的工做，各個部件的耦合性很低，人員安排靈活性比較大。

這就是咱們用蘋果籃子實例講解的react+redux開發流程，你們造成redux流程基本的概念就好，具體的理解仍是要在實踐中慢慢參透。

一些依賴的JS庫沒有在這裏給你們介紹，你們能夠在後面的相關js庫中查看。

很是感謝 @ckinmind 爲本教程提供完整源碼demo
完整源碼： https://github.com/ckinmind/a...
實例體驗 https://ckinmind.github.io/ap...
(摘蘋果的過程模擬請求網絡，體現一個異步動做，因此響應看起來有些延遲)

參考資料

《MDN Javascript Documents》
阮一峯《ECMAScript 6入門》
IVAN ROGIC 《React, Redux and Immutable.js: Ingredients for Efficient Web Applications》

項目相關js庫列表：

webpack ： js開發環境和打包器
babel ： es6 編譯器
react ：當下很是火的顯示框架
react-router ：與react搭配的前端路由器
redux ： web應用的狀態容器（定義了一套很是清晰的數據傳遞流程）
react-redux ： react 和 redux 的鏈接器
redux-logger ： redux 的控制檯 log 中間件
redux-thunk： redux 的 thunk 中間件
react-router-redux : react-router和 redux 配套使用的鏈接器
immutable.js: js 持久化數據框架
mock.js ：用於產生模擬後臺數據的框架
jquery: 在項目中，咱們僅使用它的很是通行的 ajax 功能

感謝您的閱讀，但願這篇文章對你們有幫助，歡迎回復和討論。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。