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

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

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

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

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

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

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

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

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

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

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

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

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

2.定義Reducer,來進行狀態(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;
    }
}

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

3.創(chuàng)建store。

let store = createStore(programLanguage);

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

createStore的定義如下:

function createStore(reducer, preloadedState, enhancer);

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

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

preloadedState: 初始state

enhancer：組合store creator的高級函數(shù),返回一個新的強化過的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ù)中，進行狀態(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" });時 返回的是JavaScript。是由于dispatch方法內(nèi)部會調(diào)用在createStore中注冊的Reducer函數(shù)，即programLanguage函數(shù)。由programLanguage的內(nèi)部邏輯return的是一個defaultState。此時整個應(yīng)用的狀態(tài)為JavaScript

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

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

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

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

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

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

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

在demo2中

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

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

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

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

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

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

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

謝謝閱讀，如果感覺本文對你有用，那將是我的榮幸。如果有寫的錯誤的地方也請留言指正。