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

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

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

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

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

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

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

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

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

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

這一點對精細化分工協作很有好處。

我們來看看這三個概念：

store 是應用的狀態管理中心，保存著是應用的狀態（state），當收到狀態的更新時，會觸發視覺組件進行更新。

container 是視覺組件的容器，負責把傳入的狀態變量渲染成視覺組件，在瀏覽器顯示出來。

reducer 是動作(action)的處理中心， 負責處理各種動作并產生新的狀態（state），返回給store。

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

我們可以做個形象的比喻，把 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         開發接口文件夾：存放開發接口文檔

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

能力要求：只需要會使用 HTML + CSS （SASS）進行布局即可

任務內容：1. 蘋果籃子組件（容器組件） 2. 水果組件（顯示組件）

redux 的組件分為兩類，一類是容器組件 container ，一類是普通顯示組件 component。容器負責接收store中的state和并發送action, 大多數時候需要和store直接連接，容器一般不需要多次使用，比如我們這個應用的蘋果籃子。普通組件放在容器里面，由容器確定顯示的時機、數量和內容，普通組件一般會多次使用。

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

對于容器，我們使用 React 組件類 的方式書寫，這里主要是靜態的jsx代碼，相當于html。

下面是 AppleBasket.jsx

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

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

        
蘋果籃子
        
        

            

                
當前
                
0個蘋果，0克
            
            

                
已吃掉
                
2個蘋果，480克
            
            
        
                    
        

            
蘋果籃子空空如也
        
        
        

            摘蘋果
        
        
      
    );
  }

}

export default connect()(AppleBusket);

同時靜態布局開發人員還要負責書寫樣式，宅印的樣式使用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號
                    
265克
                
                
吃掉
            
        );

    }


}

export default AppleItem;

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

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

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

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

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

下面看看“蘋果籃子”的動態布局，我們去 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 (
            

                
蘋果籃子

                

                    

                        
當前
                        

                            {stats.appleNow.quantity}個蘋果，
                            {stats.appleNow.weight}克
                        
                    
                    

                        
已吃掉
                        

                            {stats.appleEaten.quantity}個蘋果，
                            {stats.appleEaten.weight}克
                        
                    
                

                

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

                

                    摘蘋果
                

            
        );
    }

}

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

export default connect(select)(AppleBusket);

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

普通顯示組件的動態渲染和容器類似，只是這里的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 (
            

                

                

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

    }


}

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語法。

任務內容：開發 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: , //action的負載，可以是數據或 error 對象
    error: , // 指明該action是否是一個以 error 為負載的action
    meta:  // 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 (
          ...
          

              { 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其實是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 (
          ...
          

              { 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);

注意這三個變動：

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

我們對比一下之前的寫法：

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

可以發現使用新的方式使代碼簡潔了很多！

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

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

對于普通顯示組件

對于普通顯示組件的actions傳遞方式，我們統一使用actions屬性傳遞，如下：

AppleBasket.jsx

...

...

AppleItem.jsx

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

普通顯示組件使用統一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

開發內容： 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 功能

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