摘要：宅印前端基于的模式開發(fā)，我們指定了一套分工明確的并行開發(fā)流程。下面通過一個(gè)蘋果籃子實(shí)例，來看看整個(gè)應(yīng)用開發(fā)流程。容器負(fù)責(zé)接收中的和并發(fā)送大多數(shù)時(shí)候需要和直接連接，容器一般不需要多次使用，比如我們這個(gè)應(yīng)用的蘋果籃子。

前言：在當(dāng)下的前端界，react 和 redux 發(fā)展得如火如荼，react 在 github 的 star 數(shù)達(dá) 42000 +，超過了 jquery 的 39000+，也即將超過前幾年比較火的angular 1 的 49000+；redux 的 star 數(shù)也要接近 20000，可見大家對(duì)其的熱情程度，究竟是什么魔力讓大家為之瘋狂呢？讓我們上車，親自體驗(yàn)一波試試~~本文章偏向于講解redux流程。

宅印前端基于 react + redux 的模式開發(fā)，我們指定了一套分工明確的并行開發(fā)流程。下面通過一個(gè) “蘋果籃子” 實(shí)例，來看看整個(gè)應(yīng)用開發(fā)流程。

非常感謝 @ckinmind 為本教程提供完整源碼demo 
完整源碼：https://github.com/ckinmind/a...
實(shí)例體驗(yàn) https://ckinmind.github.io/ap...
(摘蘋果的過程模擬請(qǐng)求網(wǎng)絡(luò)，體現(xiàn)一個(gè)異步動(dòng)作，所以響應(yīng)看起來有些延遲)

更優(yōu)雅的方式：如果你想更優(yōu)雅地使用 react + redux ，歡迎查看我的最新系列文章 pastate.js 響應(yīng)式 react 框架。

首先，我們來看看這個(gè)實(shí)例的原型：

看到這個(gè)水果籃子的樣子，大家應(yīng)該可以明白它的功能：你可以做兩件事 -- 摘蘋果和吃蘋果。當(dāng)你摘蘋果時(shí)，應(yīng)用會(huì)向后臺(tái)發(fā)送ajax請(qǐng)求索取蘋果，每個(gè)蘋果有兩個(gè)屬性：編號(hào)和重量。當(dāng)你吃蘋果掉時(shí)，不用告訴后臺(tái)，在前端偷偷吃掉就好啦~ 同時(shí)蘋果籃子會(huì)顯示當(dāng)前的蘋果量和已經(jīng)吃掉的蘋果量。好！那下面我們來開工！

下面先來總體了解一下 redux 應(yīng)用的基本原理，一圖勝千言：

可見整個(gè)redux流程的邏輯非常清晰，數(shù)據(jù)流是單向循環(huán)的，就像一個(gè)生產(chǎn)的流水線：

store（存放狀態(tài)） -> container（顯示狀態(tài)） -> reducer （處理動(dòng)作）-> store

這一點(diǎn)對(duì)精細(xì)化分工協(xié)作很有好處。

我們來看看這三個(gè)概念：

store 是應(yīng)用的狀態(tài)管理中心，保存著是應(yīng)用的狀態(tài)（state），當(dāng)收到狀態(tài)的更新時(shí)，會(huì)觸發(fā)視覺組件進(jìn)行更新。

container 是視覺組件的容器，負(fù)責(zé)把傳入的狀態(tài)變量渲染成視覺組件，在瀏覽器顯示出來。

reducer 是動(dòng)作(action)的處理中心， 負(fù)責(zé)處理各種動(dòng)作并產(chǎn)生新的狀態(tài)（state），返回給store。

NOTE：從對(duì)象的包含關(guān)系上講，reducer 是store的一部分，但在邏輯上我們把它分出來，這樣會(huì)比較容易理解整個(gè)redux流程。

我們可以做個(gè)形象的比喻，把 js 比喻成巴士，把 store, container, reducer 比喻為三個(gè)車站，再把 state 和 action 比喻成兩種乘客。這是一趟環(huán)路巴士：

js巴士 從 store車站 出發(fā)，載上 state乘客 ，state乘客 到達(dá)某個(gè) container車站 下車并把自己展示出來

過了一會(huì)，有一個(gè) action乘客 上車了，js巴士 把 action乘客 送到 reducer車站，在這里 action乘客 和 state乘客 生了一個(gè)孩子 new state，js巴士把 new state 送回了 store車站（好像是人生輪回→_→）

redux 只是定義了應(yīng)用的數(shù)據(jù)流程，只解決了 “數(shù)據(jù)層”（model layer） 的問題，一般還會(huì)使用 react， angular 等作為“顯示層” （UI layer） 來一起使用，我們項(xiàng)目采用 react 作為顯示框架。

在開始之前，這里先提供一些介紹react和redux的參考資料，如果在下文遇到哪些點(diǎn)不理解，可以來這里翻看參考資料：

react相關(guān)： react官網(wǎng), react中文站點(diǎn), 阮一峰react 入門, react教程集合

redux相關(guān)：redux官網(wǎng) , redux中文文檔

下文的展示的js代碼，會(huì)用到少量簡單的 es6 語法，可以在遇到時(shí)參考這里，或自己查找資料：

import / export ：es6代碼模塊化模式

let 聲明語句 ： 塊級(jí)變量聲明語句

箭頭函數(shù)： (..) => {..} 形式的函數(shù)

我們會(huì)使用 babel 編譯器把es6語法編譯成es5, 所以大家不必?fù)?dān)心瀏覽器兼容性問題，可以大膽使用es6。

應(yīng)用的基礎(chǔ)配置工作由前端開發(fā)主管負(fù)責(zé)，大家不必詳細(xì)理解。

按照開發(fā)的內(nèi)容，我們把前端團(tuán)隊(duì)分為兩個(gè)小組： “布局組” 和 “邏輯組”，每個(gè)小組有2種任務(wù)，一共4種任務(wù)。

布局組 - 負(fù)責(zé) contianer、component 部分

任務(wù)1：靜態(tài)布局 - 使用 HTML + CSS 靜態(tài)布局

任務(wù)2：動(dòng)態(tài)布局 - 使用 JSX 語法對(duì)靜態(tài)布局做動(dòng)態(tài)渲染處理

邏輯組 - 負(fù)責(zé) action、reducer 部分

任務(wù)1：action 開發(fā) - 制作 redux 流程的 action

任務(wù)2：reducer 開發(fā) - 制作 redux 流程的 reducer

布局組 要求對(duì) HTML + CSS 布局比較熟悉，只需要會(huì)簡單的 js 即可， 不需要完整地理解redux流程。
邏輯組 要求對(duì) js 比較熟悉，最好可以比較完整地理解redux流程， 但基本不需要涉及HTML + CSS布局工作。

接下來，先給出我們教程相關(guān)的 src 目錄。這里大家可以先一掃而過，大概了解即可

- src              源碼文件夾：包含項(xiàng)目源碼，我們基本都在這個(gè)文件夾下做開發(fā)
    - containers   容器文件夾：存放容器組件，比如 “蘋果籃子”
    - components   組件文件夾：存放普通顯示組件，比如 “蘋果”
    - actions      actions文件夾：存放可以發(fā)出的action 
    - reducers     reducers文件夾：存放action的處理器reducers
    - services     服務(wù)文件夾：存放經(jīng)過封裝的服務(wù)，如 ajax服務(wù), 模擬數(shù)據(jù)服務(wù)
    - styles       樣式文件夾：存放應(yīng)用的樣式，如css, scss
    - images       圖片文件夾：存放圖片資源
    - apis         開發(fā)接口文件夾：存放開發(fā)接口文檔

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

能力要求：只需要會(huì)使用 HTML + CSS （SASS）進(jìn)行布局即可

任務(wù)內(nèi)容：1. 蘋果籃子組件（容器組件） 2. 水果組件（顯示組件）

redux 的組件分為兩類，一類是容器組件 container ，一類是普通顯示組件 component。容器負(fù)責(zé)接收store中的state和并發(fā)送action, 大多數(shù)時(shí)候需要和store直接連接，容器一般不需要多次使用，比如我們這個(gè)應(yīng)用的蘋果籃子。普通組件放在容器里面，由容器確定顯示的時(shí)機(jī)、數(shù)量和內(nèi)容，普通組件一般會(huì)多次使用。

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

對(duì)于容器，我們使用 React 組件類 的方式書寫，這里主要是靜態(tài)的jsx代碼，相當(dāng)于html。

下面是 AppleBasket.jsx

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

class AppleBusket extends React.Component {
  
  render(){
    return (
      

        
蘋果籃子
        
        

            

                
當(dāng)前
                
0個(gè)蘋果，0克
            
            

                
已吃掉
                
2個(gè)蘋果，480克
            
            
        
                    
        

            
蘋果籃子空空如也
        
        
        

            摘蘋果
        
        
      
    );
  }

}

export default connect()(AppleBusket);

同時(shí)靜態(tài)布局開發(fā)人員還要負(fù)責(zé)書寫樣式，宅印的樣式使用sass 書寫， 下面是的例子是appleBasket.scss , 大家可以做參考：

.appleBusket{
    width: 400px;
    margin: 20px;
    border-radius: 4px;
    border: 1px solid #ffffd;
    >.title{
        padding: 6px 0px;
        text-align: center;
        color: #069;
        font-size: 20px;
        //font-weight: 600;
    }
    >.stats{
        width: 100%;
        $border: 1px dashed #ffffd;
        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;
        }
    }
}

蘋果組件的樣子如下：

普通組件的定義方法和容器類似，只是其不需要使用redux連接器來封裝，如下：

AppleItem.jsx

import React from "react";

class AppleItem extends React.Component {

    render() {

        return (
            

                

                

                    
紅蘋果 - 1號(hào)
                    
265克
                
                
吃掉
            
        );

    }


}

export default AppleItem;

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

哪些顯示元素要作為容器，哪些要作為普通組件，沒有百分之百確定劃分規(guī)則，大家根據(jù)自己的理解把它劃分到某一類即可。

這些就是任務(wù)一的內(nèi)容，書寫靜態(tài)布局，基本都是html+css工作，不需要涉及js代碼。

寫完了靜態(tài)布局后，接下來要進(jìn)行動(dòng)態(tài)渲染啦~

動(dòng)態(tài)渲染聽起來很高大上，其實(shí)意思就是根據(jù)一個(gè)stete數(shù)據(jù)對(duì)象來顯示內(nèi)容而已。首先需要確定其state的結(jié)構(gòu)。容器的state 是 store 中state的一部分，前端管理員會(huì)事先約定好其數(shù)據(jù)結(jié)構(gòu)，并在對(duì)應(yīng)的reducer中給出，只要去那里復(fù)制一份出來即可。普通組件的state只要自己定義即可，并在文件中說明清楚。

下面看看“蘋果籃子”的動(dòng)態(tài)布局，我們?nèi)?appleBasketReducer.js 可以得到水果籃子的 state 的結(jié)構(gòu)如下：

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

我們這個(gè)數(shù)據(jù)結(jié)構(gòu)把它 “實(shí)例化”，如下這樣放在我們改成寫的 AppleBasket.jsx 中，然后我們開始書寫我們的動(dòng)態(tài)渲染代碼啦，如下：

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

import AppleItem from "../components/AppleItem";

class AppleBusket extends React.Component {

    render() {
        
        let { state } = this.props;
        
        //這部分從對(duì)應(yīng)的 appleBasketReducer.js 中拷貝
        let mockState = {
            isPicking : false,
            newAppleId: 3,
            apples: [
                {
                    id: 1,
                    weight: 235,
                    isEaten: true
                },
                {
                    id: 2,
                    weight: 256,
                    isEaten: false
                }
            ]
        };
        
        //是否開啟模擬數(shù)據(jù)的開關(guān)，注釋這行代碼關(guān)閉模擬數(shù)據(jù)
        state = mockState;
        
        
        //對(duì) state 做顯示級(jí)別的轉(zhuǎn)化
        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 (
            

                
蘋果籃子

                

                    

                        
當(dāng)前
                        

                            {stats.appleNow.quantity}個(gè)蘋果，
                            {stats.appleNow.weight}克
                        
                    
                    

                        
已吃掉
                        

                            {stats.appleEaten.quantity}個(gè)蘋果，
                            {stats.appleEaten.weight}克
                        
                    
                

                

                    { state.apples.map(apple => ) }
                

                

                    摘蘋果
                

            
        );
    }

}

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

export default connect(select)(AppleBusket);

可見，動(dòng)態(tài)布局的工作要求只是在 HTML + CSS 布局的基礎(chǔ)上，再加上 JSX 語法能力即可。

普通顯示組件的動(dòng)態(tài)渲染和容器類似，只是這里的state可以自己規(guī)定，并給出示例的mockState（模擬state），使用組件的人按照示例傳入數(shù)據(jù)即可使用。

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;

        /**
         * 這個(gè)區(qū)域是 mock 數(shù)據(jù)區(qū)，也作為組件文檔，請(qǐng)書寫清楚
         * //在組件發(fā)布時(shí)，請(qǐng)注釋掉，提高性能
         */
        let mockState = {
            id: 1,
            weight: 256,
            isEaten: false
        };
        
        let mockActions = {
            eatApple : id => console.log("eatApple",id)
        };

        /**
         * 開關(guān)這行代碼，用于切換裝入的數(shù)據(jù)來源。(為了開關(guān)的方便，請(qǐng)把兩句代碼合成一行)
         * 在開發(fā)階段打開，使用內(nèi)部 state 和 action, 開發(fā)完成后請(qǐng)注釋關(guān)閉
         */
        state = mockState; actions = mockActions;

        if (state.isEaten) return null;

        return (
            

                

                

                    
紅蘋果 - {state.id}號(hào)
                    
{state.weight}克
                
                
 actions.eatApple(state.id) }>吃掉
            
        );

    }


}

export default AppleItem;

容器和普通顯示組件state的對(duì)比：

容器的state我們是從store中的總state直接獲得的，注意 AppleBusket.jsx 靠后面這段代碼：

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

select是一個(gè)state篩選器, 功能是選擇總state中的 appleBusket 作為本容器的state。而這個(gè)state的格式我們會(huì)在其對(duì)應(yīng)的reducer中規(guī)定（因?yàn)槲覀冃枰趓educer中提供對(duì)應(yīng)state的默認(rèn)值）

普通顯示組件的state格式由組件開發(fā)人員自己約定即可，并在mockState 區(qū)域給出例子。當(dāng)別人要使用你的顯示組件時(shí)，必須根據(jù)你規(guī)定的格式傳入state數(shù)據(jù)。在組件里面，我們一般會(huì)實(shí)現(xiàn)如下這樣一個(gè)自動(dòng)切換器，當(dāng)組件的使用者在使用該組件時(shí)沒有傳入state, 就會(huì)顯示內(nèi)部的模擬state，為使用者帶來預(yù)覽效果。

if(state === undefined)  state = mockState;

以上就是布局組的開發(fā)工作： 靜態(tài)布局 + 動(dòng)態(tài)布局。前者只需要會(huì)html+css布局即可，后者還要會(huì)一些jsx的語法和基本的js語法。

任務(wù)內(nèi)容：開發(fā) redux 流程的 action，并把a(bǔ)ction部署到對(duì)應(yīng)容器和組件中。
技能要求：需要對(duì)js比較熟悉，并要求要會(huì)使用jq的ajax功能。

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

1. 狹義的 action

狹義的action是指一個(gè)簡單的對(duì)象，對(duì)象的結(jié)構(gòu)如下，只要在對(duì)象內(nèi)包含type屬性指明action的名稱即可，同時(shí)，在對(duì)象的其他屬性里，可以以任何形式自由保存其他相關(guān)數(shù)據(jù)。

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

一般 type 的內(nèi)容使用 大寫字母+下劃線 的格式。

在這個(gè)定義的基礎(chǔ)上，業(yè)界提出以一種標(biāo)準(zhǔn) action， 叫做 Flux Standard Action , 該標(biāo)準(zhǔn)下的action除了type屬性之外，只允許多加（不是必須包含）這三個(gè)屬性：payload，error，meta。

let FSA = {
    type: "ACTION_NAME",
    payload: , //action的負(fù)載，可以是數(shù)據(jù)或 error 對(duì)象
    error: , // 指明該action是否是一個(gè)以 error 為負(fù)載的action
    meta:  // action元數(shù)據(jù)， 包含解釋該action含義的信息
}

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

let FSA = {
    type: "EAT_APPLE",
    payload: 3, // 負(fù)載是3, 說明吃掉3號(hào)蘋果， 這里也可以寫成 { id : 3 }
    meta: "This action will eat an apple!" // (不是必須的)
}

一個(gè)action只是一個(gè)對(duì)象，他需要根據(jù)時(shí)機(jī)被 store 的 dispatch 函數(shù)調(diào)用才會(huì)開始進(jìn)行處理：store.dispatch(action_1)。

2. 廣義的 action

廣義的 action 是指在中間件的支持下，dispatch 函數(shù)可以調(diào)用的數(shù)據(jù)類型，除了普通action之外，常見的有 thunk, promise 等。我們用常用的 thunk來舉個(gè)例子。

thunk 其實(shí)就是一個(gè)代碼片段，可以簡單理解為一種特定的函數(shù)，我們可以dispatch 這個(gè)thunk。 thunk函數(shù)具有如下的簽名

(dispatch, getState) => { 
    //在函數(shù)體內(nèi)可以使用 dispatch 方法來發(fā)射其他 action
    //在函數(shù)體內(nèi)可以使用 getState 方法來獲取當(dāng)前的state
}

下面是一個(gè)我們摘蘋果動(dòng)作的例子：

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

定義好之后，我們可以直接這樣調(diào)用這個(gè)thunk：

dispatch( pickAppleAction )

接下來，我們來做進(jìn)一步優(yōu)化，把a(bǔ)ction統(tǒng)一為actionCreator , 我們不難察覺，每次都要書寫{ type: "ACTION_NAME" ... } 是很麻煩也很容易出錯(cuò)的，actionCreator 就是為解決這個(gè)問題而生的，actionCreator 就是一個(gè)產(chǎn)生特定action（這里指廣義的action）的函數(shù)，下面來看簡單的actionCreator 例子：

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

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

這樣一來，一方面是使用起來比較簡單方便，另一方面是具有文檔作用。
只需要這樣發(fā)射action就可以啦：

dispatch(eatApple(3))

普通action的actionCreator封裝工作, 可以使用 redux-actions 自動(dòng)完成, 查看其文檔就可以快速上手，可以根據(jù)情況使用。

在項(xiàng)目中，我們會(huì)為每個(gè)板塊寫一個(gè)的action文件，并統(tǒng)一使用actionCreator, 所以最終 appleAction.js 如下：

import ajax from "../services/ajax"; //經(jīng)過封裝的加強(qiáng)型 ajax 函數(shù)

//這是名空間，對(duì)普通action做劃分
const prefix = "apple/";

let actions = {

    //注意這里需要 () => ... , 不然 pickAppleAction 不是一個(gè)actionCreator, 而是一個(gè)thunk
    pickApple: () => (dispatch, getState) => {
        
        //如果正在摘蘋果，則結(jié)束這個(gè)thunk, 不執(zhí)行摘蘋果
        if(getState().isPicking)
            return;
        
        //通知開始摘蘋果
        dispatch(actions.beginPickApple());
        
        //發(fā)送摘蘋果請(qǐng)求
        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，結(jié)合某些編輯器的智能提示功能，非常方便，下面是 vsCode 編輯器的效果：

寫好了action之后，只要在 container 的對(duì)應(yīng)位置裝上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 (
          ...
          

              { state.apples.map(apple =>
                   dispatch(actions.eatApple(id))}}
                      key={apple.id}
                  />
              ) }
          

          

               dispatch(actions.pickApple())}>摘蘋果
          
          ...
       )
    }
}

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

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

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

上面代碼中引入的actions其實(shí)是actionCreators。

此外，actionCreator還有很簡潔的用法：對(duì)actionCreator做dispatch級(jí)別的封裝，這個(gè)過程我們可以使用 redux 提供的 bindActionCreators 函數(shù)自動(dòng)完成。然后就可以直接調(diào)用action，而不需要使用dispatch方法去調(diào)用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 (
          ...
          

              { state.apples.map(apple =>
                  
              ) }
          

          

              摘蘋果
          
          ...
       )
    }
}

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

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

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

注意這三個(gè)變動(dòng)：

let { state, actions } = this.props;
actions={{eatApple: actions.eatApple }}
摘蘋果

我們對(duì)比一下之前的寫法：

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

可以發(fā)現(xiàn)使用新的方式使代碼簡潔了很多！

但是，這對(duì)于有對(duì)象屬性提示功能編輯器來說，這種方式會(huì)使編輯器無法分析對(duì)象屬性：

這時(shí)，需要一邊看actions文件對(duì)該actions對(duì)象的定義，一邊在目標(biāo)位置填入action，不過這也不是很麻煩。而且對(duì)于使用沒有對(duì)象屬性提示的編輯器的開發(fā)者來說，這個(gè) drawback 根本就不存在。我們相對(duì)推薦使用這種經(jīng)過dispatch封裝的action, 但不要求，大家根據(jù)自己的情況使用即可。

對(duì)于普通顯示組件

對(duì)于普通顯示組件的actions傳遞方式，我們統(tǒng)一使用actions屬性傳遞，如下：

AppleBasket.jsx

...

...

AppleItem.jsx

...
 actions.eatApple(state.id)}>吃掉
...

普通顯示組件使用統(tǒng)一actions屬性接受父級(jí)的action，可以在組件內(nèi)部建立mockActions, 這個(gè)mockActions 既有文檔功能，也有測(cè)試功能，非常實(shí)用：

let mockActions = {
    eatApple : id => console.log("eatApple",id), //指定了函數(shù)的簽名
    foo: (arg1,arg2) => console.log("foo",arg1,arg2) //也響應(yīng)了調(diào)用測(cè)試
};

/**
  * 開關(guān)這行代碼，用于切換裝入的state和actions來源。(為了開關(guān)的方便，請(qǐng)把兩句代碼合成一行)
  * 在開發(fā)階段打開，使用內(nèi)部 state 和 action, 開發(fā)完成后請(qǐng)注釋關(guān)閉
  */
state = mockState; actions = mockActions;    

點(diǎn)擊 “摘蘋果” 和 “吃掉” 按鈕，我們看看控制臺(tái)，已經(jīng)可以發(fā)出我們想要的action啦：

好啦，actions 開發(fā)的內(nèi)容就介紹到這里。我們來總結(jié)一下我們對(duì)action所做的封裝：

action -> actionCreator -> actionDispatcher

開發(fā)內(nèi)容： reducer的其實(shí)就是action的處理器。其開發(fā)的內(nèi)容很明確清晰，就是開發(fā)一類函數(shù)，接受action 和 當(dāng)前的state，返回新的state。

技術(shù)要求：要求對(duì)js比較熟悉，需要會(huì)使用 immutable.js 這個(gè)數(shù)據(jù)靜態(tài)化庫。

下面是reducer功能的圖解：

我們先看看我們蘋果板塊的state的數(shù)據(jù)結(jié)構(gòu)，非常簡單，這里是某個(gè)時(shí)刻的狀態(tài)：

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

有三個(gè)一級(jí)屬性：

isPicking ：表示是否正在摘蘋果，我們?cè)谏厦嬉呀?jīng)知道，摘蘋果其實(shí)是發(fā)送一個(gè)ajax請(qǐng)求，向后臺(tái)摘一個(gè)蘋果，這個(gè)請(qǐng)求在進(jìn)行時(shí)我們會(huì)把 isPicking 設(shè)置為ture, 表明正在摘蘋果，同時(shí)禁止在完成前再發(fā)送摘蘋果請(qǐng)求

newAppleId：表示新蘋果的編號(hào)

apples：是蘋果列表數(shù)組，存放著蘋果對(duì)象，蘋果對(duì)象的結(jié)構(gòu)在apples數(shù)組里有給出實(shí)例。

我們上面提及actions分為廣義的action和狹義的普通action。其實(shí)，非普通action, 如thunk，一般會(huì)以發(fā)起普通action結(jié)束。我們r(jià)educer只需要處理狹義上的普通action,。在我們摘蘋果應(yīng)用里，總共有這4個(gè)普通action:

//通知store應(yīng)用開始摘蘋果
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
})

下面是根據(jù)action，寫出的 reducer 的基本結(jié)構(gòu)：

 (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是一個(gè)函數(shù)，接受state和action兩個(gè)參數(shù)，在函數(shù)內(nèi)部，根據(jù) action.type 來確定要做哪些操作，并且每種操作都要返回state（或者是新的，或者是原來的）。

我們以 apple/EAT_APPLE動(dòng)作為例，講解如何書寫reducer。EAT_APPLE 動(dòng)作的含義是吃蘋果，我們可以非常簡單地處理這個(gè)動(dòng)作：直接把對(duì)應(yīng)蘋果對(duì)象的 isEaten 屬性設(shè)為true即可。

按照一般的思維，我們會(huì)這樣處理：

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

但是，這種方法在 redux 應(yīng)用里看不到作用，因?yàn)檫@種寫法不會(huì)使store觸發(fā)react進(jìn)行重新渲染，為什么呢？因?yàn)?newState == oldState ! 下面我們來做一些解釋：

首先，要先從js對(duì)象的相等判斷運(yùn)算說起，我們看下面的代碼

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

a 和 b 看起來一樣，但為什么是false呢？因?yàn)閷?duì)象和數(shù)組的賦值是引用賦值， a 和 b 只是一個(gè)引用符號(hào)，其所指向的對(duì)象實(shí)體不同（比如 a -> object#001, b -> object#002），js的對(duì)象（數(shù)組）相等判斷是根據(jù)是否指向同一個(gè)對(duì)象實(shí)體來的確定的 (object#001 ？= object#002 // false)，詳見 MDN。

再看看下面的例子：

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

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

現(xiàn)在應(yīng)該可以理解剛才為什么newState == oldState了吧~

redux 是根據(jù)返回的state是否改變來決定是否通知 react 更新的。根據(jù)這種情況所，可能有人會(huì)這樣改進(jìn)剛才的reducer：

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

這樣一來，點(diǎn)擊 “吃掉”按鈕，看到了有效果了，蘋果不見了！但是，這種寫法只是迎合了redux更新視覺組件的觸發(fā)條件，還具有很大的局限性，不是我們r(jià)edux規(guī)定的reducer。下面我們來看看正確的reducer：

首先，reducer有這樣的重要約束：在reducer里，不可以修改原來的state，需要保持使每個(gè)版本的state不變。

這種保持?jǐn)?shù)據(jù)不變（Persistent data structure）的方式在函數(shù)式編程（Functional programming）非常常見。在我們的redux應(yīng)用里，其意義在于：

1. 調(diào)試意義：保持每個(gè)版本的state的不變性，使得我們可以跟蹤每個(gè)時(shí)刻的state, 跟蹤應(yīng)用的“發(fā)展史”，這個(gè)特性為調(diào)試帶來了很大的方便。

2. 性能意義：保持state不變這個(gè)約束引導(dǎo)我們使用局部更新對(duì)象的方法，這樣會(huì)可以非常有效地提高react或其他顯示框架的渲染效率。我們先來看看為了保持?jǐn)?shù)據(jù)不變性，要怎么對(duì)state做更新，以我們的蘋果籃子state為例：

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

為了保證每個(gè)版本的state不變性，我們有兩種實(shí)現(xiàn)方式：“深復(fù)制”，“淺復(fù)制”。我們來看兩種模式的內(nèi)部原理：

深復(fù)制方式：有人會(huì)這樣想：“保持state的不變性很容易，只需要深復(fù)制一個(gè)state, 讓后在新的state要怎么修改就怎么修改，不ok了嗎？”，如下就是深復(fù)制

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

深復(fù)制操作運(yùn)行效率低

沒有為渲染環(huán)節(jié)提供提高渲染效率的鋪墊

它只是簡單迎合保持?jǐn)?shù)據(jù)不變性的約束，雖然有一定調(diào)試意義，但是，不但沒有提高程序的性能，反而降低了程序的總體性能！沒有實(shí)踐意義。

淺復(fù)制方式：淺復(fù)制模式只對(duì)內(nèi)部數(shù)據(jù)發(fā)生變化的引用做更新，如下

“state” 對(duì)象的內(nèi)部數(shù)據(jù)發(fā)生變化，所以創(chuàng)建新的state引用；而apples array 內(nèi)部數(shù)據(jù)不發(fā)生變化，所以就不對(duì)該引用做更新！在這個(gè)操作中，這種淺復(fù)制的方法運(yùn)行效率比較高，而且其簡單地實(shí)現(xiàn)了數(shù)據(jù)不變性，為調(diào)試帶來方便，同時(shí)，也是更重要的，這種淺復(fù)制的方式極大地提高了視覺組件渲染階段的運(yùn)行效率！我們來對(duì)比一下：當(dāng)用戶點(diǎn)擊摘蘋果時(shí)，如果使用“深復(fù)制”，渲染程序需要重新遍歷整個(gè)state對(duì)象樹來做視覺更新，而使用淺復(fù)制來實(shí)現(xiàn)數(shù)據(jù)不變性時(shí)，渲染程序只需要遍歷state對(duì)象的一級(jí)子節(jié)點(diǎn)即可，而不需要對(duì)apples array 做遍歷，性能大大地提高。尤其是當(dāng)蘋果很多的時(shí)候，兩種方式的性能差距是非常明顯的。

備注：在react組件里面，要開啟條件更新這個(gè)生命周期函數(shù) shouldComponentUpdate， 才會(huì)對(duì)把這個(gè)性能提高點(diǎn)釋放出來，類似這樣：

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

下面我們?cè)俳o出 “吃蘋果” reducer 進(jìn)行淺復(fù)制的例子：

現(xiàn)在大家應(yīng)該理解了用淺復(fù)制實(shí)現(xiàn)數(shù)據(jù)不變性的原理和意義了，下面我們來看具體的代碼實(shí)現(xiàn)。

我們的代碼用 es6 編寫，這里要用到 es6 兩個(gè)非常方便的特性：

Obejct.assign() 方法，該方法用于產(chǎn)生新的對(duì)象

延展操作符 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;
    }

};

大家會(huì)發(fā)現(xiàn)這種淺復(fù)制操作在開發(fā)的過程會(huì)復(fù)雜一點(diǎn)，于是就有了 immutable.js 這個(gè)專門處理不變性數(shù)據(jù)的庫(也是facebook出品)，它可以使用類似賦值的方式生成淺復(fù)制的不變性數(shù)據(jù)，下面來看看它怎么簡化我們的開發(fā)：

我們用 apple/EAT_APPLE 這個(gè)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后，輕松一行代碼搞定！如果團(tuán)隊(duì)約定 state 都用 immutable 內(nèi)部的數(shù)據(jù)類型，就可以連 fromJS 和 toJS 的轉(zhuǎn)化都省了，超級(jí)方便！

到這里， reducer 任務(wù)的介紹就結(jié)束啦~

至此，我們四個(gè)任務(wù)都介紹完了，大家應(yīng)該對(duì)redux流程有一定概念了，我們來回顧一下我們的4個(gè)任務(wù)：

這樣子，我們通過流程化把 react + redux 的主要流程都定義好了，這種模式的可構(gòu)建性很高，可以構(gòu)建非常復(fù)雜的單頁面應(yīng)用，不會(huì)因?yàn)閼?yīng)用的業(yè)務(wù)復(fù)雜性增加而增加開發(fā)復(fù)雜性。

并且在這種分工里面，布局組對(duì)專注于寫樣式布局，大多是基本的HTML+CSS 工作；邏輯組專注于開發(fā)應(yīng)用邏輯，基本都是JS工作，分工得到非常明確的規(guī)劃，人們可以更好地做精自己負(fù)責(zé)的工作，各個(gè)部件的耦合性很低，人員安排靈活性比較大。

這就是我們用蘋果籃子實(shí)例講解的react+redux開發(fā)流程，大家形成redux流程基本的概念就好，具體的理解還是要在實(shí)踐中慢慢參透。

一些依賴的JS庫沒有在這里給大家介紹，大家可以在后面的相關(guān)js庫中查看。

非常感謝 @ckinmind 為本教程提供完整源碼demo 
完整源碼：https://github.com/ckinmind/a...
實(shí)例體驗(yàn) https://ckinmind.github.io/ap...
(摘蘋果的過程模擬請(qǐng)求網(wǎng)絡(luò)，體現(xiàn)一個(gè)異步動(dòng)作，所以響應(yīng)看起來有些延遲)

《MDN Javascript Documents》

阮一峰 《ECMAScript 6入門》

IVAN ROGIC 《React, Redux and Immutable.js: Ingredients for Efficient Web Applications》

項(xiàng)目相關(guān)js庫列表：

webpack ： js開發(fā)環(huán)境和打包器

babel ： es6 編譯器

react ： 當(dāng)下非常火的顯示框架

react-router ： 與react搭配的前端路由器

redux ： web應(yīng)用的狀態(tài)容器（定義了一套非常清晰的數(shù)據(jù)傳遞 流程）

react-redux ： react 和 redux 的連接器

redux-logger ： redux 的控制臺(tái) log 中間件

redux-thunk： redux 的 thunk 中間件

react-router-redux : react-router和 redux 配套使用的連接器

immutable.js: js 持久化數(shù)據(jù)框架

mock.js ： 用于產(chǎn)生模擬后臺(tái)數(shù)據(jù)的框架

jquery: 在項(xiàng)目中，我們僅使用它的非常通行的 ajax 功能

感謝您的閱讀，希望這篇文章對(duì)大家有幫助，歡迎回復(fù)和討論。