摘要：實(shí)例講解示例代碼地址在這里你可以通過命令到本地，也可以直接下載。之后便可以通過執(zhí)行示例代碼。下面結(jié)合實(shí)例中的內(nèi)容理解上述概念。更改應(yīng)用的狀態(tài)通過方法將發(fā)送到函數(shù)中，進(jìn)行狀態(tài)的更新。分別用來處理頁面和頁面狀態(tài)的更新。

示例代碼地址在這里 ,你可以通過git clone命令clone到本地，也可以直接下載。

然后通過執(zhí)行npm install 安裝所依賴的模塊 。之后便可以通過node 執(zhí)行示例代碼。

隨著 JavaScript 單頁應(yīng)用開發(fā)日趨復(fù)雜，JavaScript 需要管理比任何時(shí)候都要多的 state （狀態(tài)）。 這些 state 可能包括服務(wù)器響應(yīng)、緩存數(shù)據(jù)、本地生成尚未持久化到服務(wù)器的數(shù)據(jù)，也包括 UI 狀態(tài)，如激活的路由，被選中的標(biāo)簽，是否顯示加載動(dòng)效或者分頁器等等。

簡(jiǎn)單來說Redux就是javaScript 的狀態(tài)管理器。同時(shí),Redux支持React、Angular、Ember、jQuery等。

到這里你可能并不知道該如何使用Redux，別著急，在了解如何使用之前，需要先理解相關(guān)的基本概念。示例代碼可查看demo1/app.js

在一個(gè)可以進(jìn)行用戶交互的界面上，當(dāng)我們觸發(fā)了交互事件的時(shí)候，界面也會(huì)跟著進(jìn)行更新。例如在一個(gè)app中的下拉刷新，當(dāng)我們進(jìn)行下拉刷新這個(gè)動(dòng)作時(shí)，會(huì)去請(qǐng)求服務(wù)器數(shù)據(jù)，當(dāng)返回結(jié)果時(shí)app的頁面會(huì)更新。界面的改變我們就可以看做是狀態(tài)的變化。而狀態(tài)的變化是由于我們進(jìn)行了某個(gè)動(dòng)作。在Redux中，尤其需要注意的是State是只讀的，且狀態(tài)的變化只能通過Reducer函數(shù)進(jìn)行轉(zhuǎn)換，

Action就是你與界面進(jìn)行交互的行為。它是一個(gè)對(duì)象且必須要包含一個(gè)type屬性，用來描述你要做的是什么事。

Store就是應(yīng)用狀態(tài)的容器。用來維護(hù)應(yīng)用的state、獲取state、更新state、監(jiān)聽state變化等。這里需要注意的是整個(gè)應(yīng)用只有一個(gè)Store

一個(gè)純函數(shù)，接收當(dāng)前的state和一個(gè)action參數(shù)，根據(jù)當(dāng)前的行為，即action的type屬性返回一個(gè)新的state。狀態(tài)的更新只能通過這個(gè)函數(shù)。

可能看了上述內(nèi)容你仍然不知道什么是Redux，Redux能干什么。下面結(jié)合實(shí)例demo1/app.js中的內(nèi)容理解上述概念。

1.引入相關(guān)模塊(這里沒有使用ES6的方式是為了能使用node命令直接查看結(jié)果，node命令無法識(shí)別import。當(dāng)然你也可以通過配置babel的方式使用import語法)

var { createStore } = require("redux");
//import { createStore } from "redux" //es6方式引入

2.定義Reducer,來進(jìn)行狀態(tài)的更新

var defaultState = "JavaScript"
function programLanguage(state = defaultState, action) {
    switch (action.type) {
        case "IOS":
            return action.language;
        case "WEB":
            return action.language;
        case "SNACK":
            return action.language;
        default:
            return state;
    }
}

從上述代碼可以看到，我們定義了一個(gè)programLanguage方法，其實(shí)這就是一個(gè)Reducer,它接受了當(dāng)前state和action參數(shù)。用來更新state。

3.創(chuàng)建store。

let store = createStore(programLanguage);

再次強(qiáng)調(diào)整個(gè)應(yīng)用中只能有一個(gè)store，即createStore函數(shù)只能被調(diào)用一次。

createStore的定義如下:

function createStore(reducer, preloadedState, enhancer);

可以看到的是createStore接受三個(gè)參數(shù)

reducer：就是上述的reducer函數(shù)，這里不再贅述

preloadedState: 初始state

enhancer：組合store creator的高級(jí)函數(shù),返回一個(gè)新的強(qiáng)化過的store creator。

4.更改應(yīng)用的狀態(tài)

store.dispatch({ type: "default" });
store.dispatch({ language: "Swift", type: "IOS" });
store.dispatch({ language: "Ruby", type: "WEB" });
store.dispatch({ language: "Python", type: "SNACK" });

通過dispatch方法將action發(fā)送到reducer函數(shù)中，進(jìn)行狀態(tài)的更新。

執(zhí)行node demo1/app.js 的打印結(jié)果如下

JavaScript
JavaScript Swift
JavaScript Swift Ruby
JavaScript Swift Ruby Python

當(dāng)執(zhí)行第一句代碼store.dispatch({ type: "default" });時(shí) 返回的是JavaScript。是由于dispatch方法內(nèi)部會(huì)調(diào)用在createStore中注冊(cè)的Reducer函數(shù)，即programLanguage函數(shù)。由programLanguage的內(nèi)部邏輯return的是一個(gè)defaultState。此時(shí)整個(gè)應(yīng)用的狀態(tài)為JavaScript

當(dāng)執(zhí)行第二句代碼store.dispatch({ language: "Swift", type: "IOS" });時(shí) 返回了JavaScript Swift。是由于type為IOS,programLanguage返回的是state + " " +action.language; 因?yàn)樯弦痪浯a將應(yīng)用的狀態(tài)變?yōu)榱?b>JavaScript，所以結(jié)果自然就是JavaScript Swift。同時(shí)整個(gè)應(yīng)用的狀態(tài)也會(huì)變成JavaScript Swift。

同理，第三句和第四句代碼也是如此。

5.訂閱狀態(tài)的更新

store.subscribe(() =>
    console.log(store.getState())
);

為了方便查看狀態(tài)的變化。這里調(diào)用了subscribe方法，每當(dāng)狀態(tài)發(fā)生變化時(shí)都會(huì)調(diào)用其回調(diào)函數(shù)。

store.getState() 獲取應(yīng)用的當(dāng)前狀態(tài)。

隨著頁面的增加，Action必然也會(huì)越來越多，如果Action內(nèi)部所攜帶的消息也很多。此時(shí)如果需要狀態(tài)的更新，就需要寫復(fù)雜的Action，造成代碼可讀性差，文件臃腫。所以我們可以使用Action creator來構(gòu)造Action。當(dāng)需要進(jìn)行狀態(tài)更新就傳入相應(yīng)的數(shù)據(jù)到Action creator中生成Action并返回。

在demo2中

我們創(chuàng)建了一個(gè)HomeAction的文件專門用來存放Action Creator。在此文件中我們創(chuàng)建了三個(gè)Action creator，分別是action_ios、action_web、action_snack，并將創(chuàng)建Action的任務(wù)交給這三個(gè)函數(shù)。

與此同時(shí)在我們demo2/app.js中需要dispatch一個(gè)action的時(shí)候。只需要從Action creator中取出Action就行了。并不需要我們手動(dòng)的去創(chuàng)建，如此一來便大大增加代碼的可讀性，可維護(hù)性。

同樣的隨著業(yè)務(wù)量的增加，Reducer必定也會(huì)越來越大。所以我們可以按模塊的不同來拆分Reducer。將一個(gè)大的Reducer拆分成幾個(gè)小的reducer。

在demo3中reducer文件夾中，我們按照模塊的不同的拆分homeReducer和profileReducer。分別用來處理home頁面和profile頁面狀態(tài)的更新。

那么問題來了，這么拆分如何使用createStore去創(chuàng)建store呢，畢竟createStore只能傳一個(gè)Reducer參數(shù)。而且createStore只能調(diào)用一次。

別著急，在redux中提供了一個(gè)combineReducers的方法，用來組合我們的Reducer。

const mainReducer = combineReducers({
    homeReducer,
    profileReducer
})
let store = createStore(mainReducer);

謝謝閱讀，如果感覺本文對(duì)你有用，那將是我的榮幸。如果有寫的錯(cuò)誤的地方也請(qǐng)留言指正。