近期更新
本人新推出 react 的 state 管理框架 pastate.js, 讓我們可以用賦值=的方式來更新 state 值羽圃！
歡迎關(guān)注和star跌宛，感謝~

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

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

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

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

蘋果籃子

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

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

redux 流程

可見整個(gè)redux流程的邏輯非常清晰巴粪，數(shù)據(jù)流是單向循環(huán)的通今，就像一個(gè)生產(chǎn)的流水線： store（存放狀態(tài)） -> container（顯示狀態(tài)） -> reducer （處理動(dòng)作）-> store，這一點(diǎn)對精細(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：從對象的包含關(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 聲明語句 ： 塊級變量聲明語句
• 箭頭函數(shù)： (..) => {..} 形式的函數(shù)

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

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

按任務(wù)分工來分步講解

按照開發(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 語法對靜態(tài)布局做動(dòng)態(tài)渲染處理

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

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

布局組 要求對 HTML + CSS 布局比較熟悉豁延，只需要會(huì)簡單的 js 即可昙篙， 不需要完整地理解redux流程。
邏輯組 要求對 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ā)接口文檔

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

布局組

任務(wù)1：靜態(tài)布局

• 能力要求：只需要會(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ì)多次使用。

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

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

蘋果籃子

對于容器芦鳍，我們使用 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 (
      <div className="appleBusket">
        <div className="title">蘋果籃子</div>
        
        <div className="stats">
            <div className="section">
                <div className="head">當(dāng)前</div>
                <div className="content">0個(gè)蘋果间影，0克</div>
            </div>
            <div className="section">
                <div className="head">已吃掉</div>
                <div className="content">2個(gè)蘋果，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);

同時(shí)靜態(tài)布局開發(fā)人員還要負(fù)責(zé)書寫樣式茄茁，宅印的樣式使用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">![](../images/apple.png)</div>
                <div className="info">
                    <div className="name">紅蘋果 - 1號(hào)</div>
                    <div className="weight">265克</div>
                </div>
                <div className="btn-div"><button>吃掉</button></div>
            </div>
        );

    }


}

export default AppleItem;

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

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

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

任務(wù)2：動(dòng)態(tài)渲染

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

（1）容器的動(dòng)態(tài)渲染

下面看看“蘋果籃子”的動(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;
        
        //這部分從對應(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;
        
        
        //對 state 做顯示級別的轉(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 (
            <div className="appleBusket">
                <div className="title">蘋果籃子</div>

                <div className="stats">
                    <div className="section">
                        <div className="head">當(dāng)前</div>
                        <div className="content">
                            {stats.appleNow.quantity}個(gè)蘋果，
                            {stats.appleNow.weight}克
                        </div>
                    </div>
                    <div className="section">
                        <div className="head">已吃掉</div>
                        <div className="content">
                            {stats.appleEaten.quantity}個(gè)蘋果抱究，
                            {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);

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

（2）普通顯示組件的動(dòng)態(tài)渲染

普通顯示組件的動(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ū)，也作為組件文檔啸胧，請書寫清楚
         * //在組件發(fā)布時(shí)赶站，請注釋掉，提高性能
         */
        let mockState = {
            id: 1,
            weight: 256,
            isEaten: false
        };
        
        let mockActions = {
            eatApple : id => console.log('eatApple',id)
        };

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

        if (state.isEaten) return null;

        return (
            <div className="appleItem">
                <div className="apple">![](../images/apple.png)</div>
                <div className="info">
                    <div className="name">紅蘋果 - {state.id}號(hào)</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的對比：
（1）容器的state我們是從store中的總state直接獲得的烙博，注意 AppleBusket.jsx 靠后面這段代碼 :

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

select是一個(gè)state篩選器, 功能是選擇總state中的 appleBusket 作為本容器的state。而這個(gè)state的格式我們會(huì)在其對應(yīng)的reducer中規(guī)定（因?yàn)槲覀冃枰趓educer中提供對應(yīng)state的默認(rèn)值）
（2）普通顯示組件的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ù)1： action 開發(fā)

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

首先氯窍，我們先來看看 action 的定義饲常。

• 狹義的action ： 狹義的action是指一個(gè)簡單的對象，對象的結(jié)構(gòu)如下狼讨，只要在對象內(nèi)包含type屬性指明action的名稱即可贝淤，同時(shí)，在對象的其他屬性里政供，可以以任何形式自由保存其他相關(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: <bool | number | string | object>, //action的負(fù)載招刨，可以是數(shù)據(jù)或 error 對象
    error: <bool>, // 指明該action是否是一個(gè)以 error 為負(fù)載的action
    meta: <string> // 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è)對象打却，他需要根據(jù)時(shí)機(jī)被 store 的 dispatch 函數(shù)調(diào)用才會(huì)開始進(jìn)行處理： store.dispatch(action_1)

• 廣義的 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ù)

//這是名空間叉弦，對普通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ā)送摘蘋果請求
        ajax({
            url: '/appleBasket/pickApple',
            method: 'GET'
        }).done(data => {
            dispatch(actions.donePickApple(data.weight))
        })
        .fail(error => {
            dispatch(actions.failPickApple(error));
        })
    },
    
    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 編輯器的效果：

導(dǎo)入蘋果籃子板塊的action

vsCode中的智能提示

寫好了action之后柠衍，只要在 container 的對應(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 (
          ...
          <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其實(shí)是actionCreators。
此外疹鳄，actionCreator還有很簡潔的用法：對actionCreator做dispatch級別的封裝拧略，這個(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 (
          ...
          <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);

注意這三個(gè)變動(dòng)：
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>
可以發(fā)現(xiàn)使用新的方式使代碼簡潔了很多袱饭！

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

不能判斷出對象的屬性虑乖，大家可以對比上一圖的效果

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

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

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

AppleItem.jsx

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

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

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

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

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

該log功能需要 redux-log 中間件支持

好啦富拗，actions 開發(fā)的內(nèi)容就介紹到這里臼予。我們來總結(jié)一下我們對action所做的封裝：
action -> actionCreator -> actionDispatcher

邏輯組 -任務(wù)2：reducer 開發(fā)

開發(fā)內(nèi)容： reducer的其實(shí)就是action的處理器。其開發(fā)的內(nèi)容很明確清晰啃沪，就是開發(fā)一類函數(shù)粘拾，接受action 和 當(dāng)前的state，返回新的state创千。
技術(shù)要求：要求對js比較熟悉缰雇，需要會(huì)使用 immutable.js 這個(gè)數(shù)據(jù)靜態(tài)化庫入偷。

下面是reducer功能的圖解：

reducer的功能

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

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

有三個(gè)一級屬性：
isPicking ：表示是否正在摘蘋果疏之，我們在上面已經(jīng)知道，摘蘋果其實(shí)是發(fā)送一個(gè)ajax請求暇咆，向后臺(tái)摘一個(gè)蘋果锋爪，這個(gè)請求在進(jìn)行時(shí)我們會(huì)把 isPicking 設(shè)置為ture, 表明正在摘蘋果，同時(shí)禁止在完成前再發(fā)送摘蘋果請求
newAppleId：表示新蘋果的編號(hào)
apples：是蘋果列表數(shù)組爸业，存放著蘋果對象其骄，蘋果對象的結(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)作：直接把對應(yīng)蘋果對象的 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對象的相等判斷運(yùn)算說起顽爹，我們看下面的代碼

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

a 和 b 看起來一樣，但為什么是false呢骆姐？因?yàn)閷ο蠛蛿?shù)組的賦值是引用賦值镜粤， a 和 b 只是一個(gè)引用符號(hào)捏题，其所指向的對象實(shí)體不同（比如 a -> object#001, b -> object#002），js的對象（數(shù)組）相等判斷是根據(jù)是否指向同一個(gè)對象實(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)試帶來了很大的方便池户。

我們點(diǎn)擊了摘蘋果按鈕，最終發(fā)起了兩個(gè)(普通)action, 我們可以輕松查看action前后的state

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

  深復(fù)制
  
  這種方式是一種很低級保持不變性的方式：
  （1）深復(fù)制操作運(yùn)行效率低
  （2）沒有為渲染環(huán)節(jié)提供提高渲染效率的鋪墊
  它只是簡單迎合保持?jǐn)?shù)據(jù)不變性的約束，雖然有一定調(diào)試意義赚楚，但是毙沾，不但沒有提高程序的性能，反而降低了程序的總體性能宠页！沒有實(shí)踐意義左胞。

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

Paste_Image.png

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

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

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

下面我們再給出 “吃蘋果” reducer 進(jìn)行淺復(fù)制的例子：

吃蘋果過程

現(xiàn)在大家應(yīng)該理解了用淺復(fù)制實(shí)現(xiàn)數(shù)據(jù)不變性的原理和意義了狱掂，下面我們來看具體的代碼實(shí)現(xiàn)。
我們的代碼用 es6 編寫亲轨，這里要用到 es6 兩個(gè)非常方便的特性：
（1）Obejct.assign() 方法，該方法用于產(chǎn)生新的對象
（2）延展操作符 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)化都省了，超級方便千扔！

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

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

redux開發(fā)流程

這樣子褥符，我們通過流程化把 react + redux 的主要流程都定義好了，這種模式的可構(gòu)建性很高抚垃，可以構(gòu)建非常復(fù)雜的單頁面應(yīng)用喷楣，不會(huì)因?yàn)閼?yīng)用的業(yè)務(wù)復(fù)雜性增加而增加開發(fā)復(fù)雜性。
并且在這種分工里面鹤树，布局組對專注于寫樣式布局铣焊，大多是基本的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/apple-basket-redux
實(shí)例體驗(yàn) https://ckinmind.github.io/apple-basket-redux/
(摘蘋果的過程模擬請求網(wǎng)絡(luò)，體現(xiàn)一個(gè)異步動(dòng)作铁坎，所以響應(yīng)看起來有些延遲)

參考資料：
（1）《MDN Javascript Documents》
（2）阮一峰 《ECMAScript 6入門》
（3）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 功能

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