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

CamillaPrie 8年前發布 | 227K 次閱讀前端開發 React Redux JavaScript開發

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

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

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

看到這個水果籃子的樣子，大家應該可以明白它的功能：你可以做兩件事 -- 摘蘋果和吃蘋果。當你摘蘋果時，應用會向后臺發送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 開發接口文件夾 ：存放開發接口文檔

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

布局組

任務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(error => {
        //發射普通 action, 其負載是一個error
        dispatch({
            type: 'FAIL_PICK_APPLE',
            payload: error ,
            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(error => {
            dispatch(actions.failPickApple(error));
        })
    },

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

};

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 這個專門處理不變性數據的庫(也是非死book出品)，它可以使用類似賦值的方式生成淺復制的不變性數據，下面來看看它怎么簡化我們的開發：

我們用 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庫中查看。

參考資料

《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 功能

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

來自： https://segmentfault.com/a/1190000005356568

本文由用戶 CamillaPrie 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。

轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。

本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！

本文地址：http://www.baiduhome.net/lib/view/open1464340798400.html

前端開發 React Redux JavaScript開發