Redux 主要分為三個部分 Action、Reducer、及 Store

• Action。Action 很簡單，就是一個單純的包含 { type, payload } 的對象，type 是一個常量用來標(biāo)示動作類型，payload 是這個動作攜帶的數(shù)據(jù)。Action 需要通過 store.dispatch() 方法來發(fā)送。
• Reducer。Reducer 用來處理 Action 觸發(fā)的對狀態(tài)樹的更改。所以一個 reducer 函數(shù)會接受 oldState 和 action 兩個參數(shù)，返回一個新的 state：(oldState, action) => newState。
• Store。Store 的作用就是連接Action 和 Reducer，Store 的作用有這么幾個：Hold 住整個應(yīng)用的 State 狀態(tài)樹；提供一個 getState() 方法獲取 State；提供一個 dispatch() 方法發(fā)送 action 更改 State；提供一個 subscribe() 方法注冊回調(diào)函數(shù)監(jiān)聽 State 的更改

嚴(yán)格的單向數(shù)據(jù)流是 Redux 架構(gòu)的設(shè)計核心。store.dispatch(action) -> reducer(state, action) -> store.getState() 構(gòu)成了一個“單向數(shù)據(jù)流”。

Redux 應(yīng)用中數(shù)據(jù)的生命周期遵循下面 4 個步驟：

• 調(diào)用 store.dispatch(action)。
• Redux store 調(diào)用傳入的 reducer 函數(shù)。
• 根 reducer 應(yīng)該把多個子 reducer 輸出合并成一個單一的 state 樹。
• Redux store 保存了根 reducer 返回的完整 state 樹。

Redux 與 Flux

Flux 是一種應(yīng)用架構(gòu)，或者說是一種思想，它跟 React 本身沒什么關(guān)系，它可以用在 React 上，也可以用在別的框架上。

Flux 主要包括四個部分，Dispatcher、Store、View、Action，其中 Dispatcher 是 Flux 的核心樞紐，它相當(dāng)于是一個事件分發(fā)器，將那些分散在各個組件里面的邏輯代碼收集起來，統(tǒng)一在 Dispatcher 中進(jìn)行處理。

完整的 Flux 處理流程是這樣的：用戶通過與 view 交互或者外部產(chǎn)生一個 Action，Dispatcher 接收到 Action 并執(zhí)行那些已經(jīng)注冊的回調(diào)，向所有 Store 分發(fā) Action。通過注冊的回調(diào)，Store 響應(yīng)那些與他們所保存的狀態(tài)有關(guān)的 Action。然后 Store 會觸發(fā)一個 change 事件，來提醒 controller-views 數(shù)據(jù)已經(jīng)發(fā)生了改變。Controller-views 監(jiān)聽這些事件并重新從 Store 中獲取數(shù)據(jù)。這些 controller-views 調(diào)用他們自己的 setState() 方法，重新渲染自身以及組件樹上的所有后代組件。

Redux 的靈感來源于 Flux 的幾個重要特性，它可以看作是 Flux 的一種實現(xiàn)。和 Flux 一樣，Redux 規(guī)定，將模型的更新邏輯全部集中于一個特定的層，都不允許程序直接修改數(shù)據(jù)，而是用一個叫作 “action” 的普通對象來對更改進(jìn)行描述。不同的是：

• Redux 只有一個 store。 Flux 里面會有多個 store 存儲應(yīng)用數(shù)據(jù)，并在 store 里面執(zhí)行更新邏輯，當(dāng) store 變化的時候再通知 controller-view 更新自己的數(shù)據(jù)，Redux 將各個 store 整合成一個完整的 store，并且可以根據(jù)這個 store 推導(dǎo)出應(yīng)用完整的 state。同時 Redux 中更新的邏輯也不在 store 中執(zhí)行而是放在 reducer 中。
• Redux 沒有 Dispatcher。Redux 中沒有 Dispatcher 的概念，它使用 reducer 來進(jìn)行事件的處理，reducer 是一個純函數(shù)，這個函數(shù)被表述為 (previousState, action) => newState，它根據(jù)應(yīng)用的狀態(tài)和當(dāng)前的 action 推導(dǎo)出新的 state。Redux 中有多個 reducer，每個 reducer 負(fù)責(zé)維護(hù)應(yīng)用整體 state 樹中的某一部分，多個 reducer 可以通過 combineReducers 方法合成一個根reducer，這個根reducer負(fù)責(zé)維護(hù)完整的 state，當(dāng)一個 action 被發(fā)出，store 會調(diào)用 dispatch 方法向某個特定的 reducer 傳遞該 action，reducer 收到 action 之后執(zhí)行對應(yīng)的更新邏輯然后返回一個新的 state，state 的更新最終會傳遞到根reducer處，返回一個全新的完整的 state，然后傳遞給 view。

Redux使用

應(yīng)用中所有的 state 都以一個對象樹的形式儲存在一個單一的 store 中。唯一改變 state 的辦法是觸發(fā) action，一個描述發(fā)生什么的對象。
為了描述 action 如何改變 state 樹，需要編寫 reducers。

    // 這是一個 reducer，形式為 (state, action) => state 的純函數(shù)。
    function counter(state = 0, action) {        switch (action.type) {            case 'INCREMENT':                return state + 1;            case 'DECREMENT':                return state - 1;            default:                return state;
        }
    }    // 創(chuàng)建 Redux store 來存放應(yīng)用的狀態(tài)
    let store = createStore(counter);    // 可以手動訂閱更新，也可以事件綁定到視圖層。
    store.subscribe(() =>        console.log(store.getState())
    );    // 改變內(nèi)部 state 唯一方法是 dispatch 一個 action。
    store.dispatch({ type: 'INCREMENT' }); // 輸出：1        
    store.dispatch({ type: 'INCREMENT' }); // 輸出：2
    store.dispatch({ type: 'DECREMENT' }); // 輸出：1

以上代碼，首先定義改變應(yīng)用狀態(tài)的對象，這個對象被叫做 action，而不是直接改變 state。然后編寫專門的函數(shù)來決定每個 action 如何改變應(yīng)用的 state，這個函數(shù)被叫做 reducer。

Redux只有一個單一的 store 和一個根級的 reduce 函數(shù)（reducer）。

隨著應(yīng)用越來越大，一方面，不能把所有的數(shù)據(jù)都放到一個reducer里面，另一方面，為每個reducer創(chuàng)建一個store，后續(xù)store的維護(hù)就顯得比較麻煩。combineReducers 輔助函數(shù)的作用是，把一個由多個不同 reducer 函數(shù)作為 value 的 object，合并成一個最終的 reducer 函數(shù)，然后就可以對這個 reducer 調(diào)用 createStore。合并后的 reducer 可以調(diào)用各個子 reducer，并把它們的結(jié)果合并成一個 state 對象。state 對象的結(jié)構(gòu)由傳入的多個 reducer 的 key 決定。

    // 創(chuàng)建兩個reducer
    function todos(state = [], action) {        switch (action.type) {            case 'ADD_TODO':                return state.concat([action.text])            default:                return state
        }
    }    function counter(state = 0, action) {        switch (action.type) {            case 'INCREMENT':                return state + 1
            case 'DECREMENT':                return state - 1
            default:                return state
        }
    }    // 將多個reducer合并成一個
    var combineReducers = require('../../lib/redux/redux').combineReducers;    var rootReducer = combineReducers({
        todos,
        counter
    });    var createStore = require('../../lib/redux/redux').createStore;    var store = createStore(rootReducer);    console.log(store.getState())    // {
    //   counter: 0,
    //   todos: []
    // }
    store.dispatch({
        type: 'ADD_TODO',
        text: 'Use Redux'
    });    // {
    //   counter: 0,
    //   todos: [ 'Use Redux' ]
    // }

參考資料

• Redux
• Redux@github
• Redux 中文文檔
• 微信小程序集成 Redux
• 解讀redux工作原理
• 淺談 React、Flux 與 Redux
• Redux 卍解