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

chaosx110 發(fā)布于2019-08-19 18:25 / 1786人閱讀

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

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

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

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

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

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

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

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

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

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

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

我們來看看這三個概念：

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

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

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

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

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

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

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

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

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

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

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

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

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

let 聲明語句：塊級變量聲明語句

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

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

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

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

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

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

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

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

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

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

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

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

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

- src              源碼文件夾：包含項目源碼，我們基本都在這個文件夾下做開發(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)布局

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

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

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

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 (
      
        蘋果籃子
        
        
            
                當(dāng)前
                0個蘋果，0克
            
            
                已吃掉
                2個蘋果，480克
                        
        
                    
        
            蘋果籃子空空如也
        
        
        
            
        
        
      
    );
  }

}

export default connect()(AppleBusket);

同時靜態(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;
        }
    }
}

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

蘋果組件的樣子如下：

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

AppleItem.jsx

import React from "react";

class AppleItem extends React.Component {

    render() {

        return (
            
                
                
                    紅蘋果 - 1號
                    265克
                
                
            
        );

    }


}

export default AppleItem;

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

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

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

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

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

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

1. 容器的動態(tài)渲染

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

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

我們這個數(shù)據(jù)結(jié)構(gòu)把它 “實例化”，如下這樣放在我們改成寫的 AppleBasket.jsx 中，然后我們開始書寫我們的動態(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 (
            
                蘋果籃子

                
                    
                        當(dāng)前
                        
                            {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);

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

2. 普通顯示組件的動態(tài)渲染

普通顯示組件的動態(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;

        /**
         * 這個區(qū)域是 mock 數(shù)據(jù)區(qū)，也作為組件文檔，請書寫清楚
         * //在組件發(fā)布時，請注釋掉，提高性能
         */
        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 (
            
                
                
                    紅蘋果 - {state.id}號
                    {state.weight}克
                
                
            
        );

    }


}

export default AppleItem;

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

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

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

select是一個state篩選器, 功能是選擇總state中的 appleBusket 作為本容器的state。而這個state的格式我們會在其對應(yīng)的reducer中規(guī)定（因為我們需要在reducer中提供對應(yīng)state的默認(rèn)值）

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

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

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

邏輯組 任務(wù)1：action 開發(fā)?

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

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

1. 狹義的 action

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

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

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

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

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

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

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

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

2. 廣義的 action

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

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

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

下面是一個我們摘蘋果動作的例子：

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ù)載是一個error
        dispatch({
            type: "FAIL_PICK_APPLE",
            payload: new Error(xhr.responseText) ,
            error: true
        }); 
    })
}

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

dispatch( pickAppleAction )

接下來，我們來做進一步優(yōu)化，把action統(tǒng)一為actionCreator , 我們不難察覺，每次都要書寫{ type: "ACTION_NAME" ... } 是很麻煩也很容易出錯的，actionCreator 就是為解決這個問題而生的，actionCreator 就是一個產(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 自動完成, 查看其文檔就可以快速上手，可以根據(jù)情況使用。

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

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

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

let actions = {

    //注意這里需要 () => ... , 不然 pickAppleAction 不是一個actionCreator, 而是一個thunk
    pickApple: () => (dispatch, getState) => {
        
        //如果正在摘蘋果，則結(jié)束這個thunk, 不執(zhí)行摘蘋果
        if(getState().isPicking)
            return;
        
        //通知開始摘蘋果
        dispatch(actions.beginPickApple());
        
        //發(fā)送摘蘋果請求
        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 的對應(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}
                  />
              ) }
          

          
              
          
          ...
       )
    }
}

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

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

actions={{eatApple: id => dispatch(actions.eatApple(id))}}

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

此外，actionCreator還有很簡潔的用法：對actionCreator做dispatch級別的封裝，這個過程我們可以使用 redux 提供的 bindActionCreators 函數(shù)自動完成。然后就可以直接調(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);

注意這三個變動：

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

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

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

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

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

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

對于普通顯示組件

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

AppleBasket.jsx

...

...

AppleItem.jsx

...

...

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

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;

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

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

action -> actionCreator -> actionDispatcher

任務(wù)2：reducer 開發(fā)

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

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

下面是reducer功能的圖解：

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

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

有三個一級屬性：

isPicking ：表示是否正在摘蘋果，我們在上面已經(jīng)知道，摘蘋果其實是發(fā)送一個ajax請求，向后臺摘一個蘋果，這個請求在進行時我們會把 isPicking 設(shè)置為ture, 表明正在摘蘋果，同時禁止在完成前再發(fā)送摘蘋果請求

newAppleId：表示新蘋果的編號

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

我們上面提及actions分為廣義的action和狹義的普通action。其實，非普通action, 如thunk，一般會以發(fā)起普通action結(jié)束。我們reducer只需要處理狹義上的普通action,。在我們摘蘋果應(yīng)用里，總共有這4個普通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是一個函數(shù)，接受state和action兩個參數(shù)，在函數(shù)內(nèi)部，根據(jù) action.type 來確定要做哪些操作，并且每種操作都要返回state（或者是新的，或者是原來的）。

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

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

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

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

首先，要先從js對象的相等判斷運算說起，我們看下面的代碼

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

a 和 b 看起來一樣，但為什么是false呢？因為對象和數(shù)組的賦值是引用賦值， a 和 b 只是一個引用符號，其所指向的對象實體不同（比如 a -> object#001, b -> object#002），js的對象（數(shù)組）相等判斷是根據(jù)是否指向同一個對象實體來的確定的 (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ù)這種情況所，可能有人會這樣改進剛才的reducer：

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

};

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

我們用 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 內(nèi)部的數(shù)據(jù)類型，就可以連 fromJS 和 toJS 的轉(zhuǎn)化都省了，超級方便！

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

總結(jié)

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

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

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

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

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

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

參考資料

《MDN Javascript Documents》

阮一峰《ECMAScript 6入門》

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

項目相關(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 的控制臺 log 中間件

redux-thunk： redux 的 thunk 中間件

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

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

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

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

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

云服務(wù)器 GPU云服務(wù)器 react-redux React_Redux_Appointm react-router-redux 前端開發(fā)流程

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/79571.html

發(fā)表評論

登陸后可評論

0條評論

chaosx110

男|高級講師

我要關(guān)注我要私信

TA的文章

tensorflow

閱讀 440·2023-04-25 16:38
代碼統(tǒng)計---使用SourceCounter

閱讀 1575·2021-09-26 09:46
中國服裝行業(yè)要走服裝智能制造路線

閱讀 3414·2021-09-08 09:35
LESS CSS使用及語法入門

閱讀 2837·2019-08-30 12:54
一些常用的 CSS 技巧和知識點

閱讀 3307·2019-08-29 17:06
jQuery 圖片查看插件 Magnify 開發(fā)簡介（仿 Windows 照片查看器）

閱讀 1109·2019-08-29 14:06
移動端

閱讀 3417·2019-08-29 13:00
每周前端開源推薦第四期

閱讀 3526·2019-08-28 17:53

成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲中文字幕日韩无码

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

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

相關(guān)文章

**前端每周清單半年盤點之 React 與 ReactNative 篇**

實例講解react+react-router+redux

**前端每周清單第 53 期：Go 與 WebAssembly, React Suspense 演練,**

3月份前端資源分享

**參加第二屆前端開發(fā)者年度大會總結(jié)**

發(fā)表評論

0條評論

chaosx110

男|高級講師

TA的文章

tensorflow

代碼統(tǒng)計---使用SourceCounter

中國服裝行業(yè)要走服裝智能制造路線

LESS CSS使用及語法入門

一些常用的 CSS 技巧和知識點

jQuery 圖片查看插件 Magnify 開發(fā)簡介（仿 Windows 照片查看器）

移動端

每周前端開源推薦第四期

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

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

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！