Redux 入門

個人博客，歡迎來訪！

狀態管理，第一次聽到這個詞要追溯到去年年底。那時，Flux 紅透半邊天，而 Reflux也是風華正茂。然而，前一陣一直在忙其他的事，一直沒時間學學這兩個庫，到現在Redux 似乎又有一統天下的趨勢。

那就來看看，Redux 是憑藉什麼做到異軍突起的。

Whats Redux

Redux 是一個 JavaScript 應用狀態管理的庫，它幫助你編寫行為一致，並易於測試的代碼，而且它非常迷你，只有 2KB。

Redux 有一點和別的前端庫或框架不同，它不單單是一套類庫，它更是一套方法論，告訴你如何去構建一個狀態可預測的應用。

Why using Redux

隨著單頁應用變得越來越複雜，前端代碼需要管理各種各樣的狀態，它可以是伺服器的響應，也可能是前端界面的狀態。當這個狀態變得任意可變，那麼你就可能在某個時間點失去對整個應用狀態的控制。

Redux 就是為了解決這個問題而誕生的。

簡短地說，Redux 為整個應用創建並管理一棵狀態樹，並通過限制更新發生的時間和方式，而使得整個應用狀態的變化變得可以被預測。

除此之外，Redux 有著一整套豐富的生態圈，包括教程、中間件、開發者工具及文檔，這些都可以在官方文檔中找到。

How to use Redux

三大原則

在使用 Redux 之前，你必須要謹記它的三大原則：單一數據源、state 是只讀的和使用純函數執行修改。

• 單一數據源

  
  

  整個應用的 state 都被儲存在一棵樹中，並且這棵狀態樹只存在於唯一一個 store中。

  這使得來自服務端的 state 可以輕易地注入到客戶端中；並且，由於是單一的 state 樹，代碼調試、以及「撤銷/重做」這類功能的實現也變得輕而易舉。

• 只讀的 state

  
  

  唯一改變 state 的方法就是觸發 action，action 是一個用於描述已發生事件的普通對象。

  這就表示無論是用戶操作或是請求數據都不能直接修改 state，相反它們只能通過觸發 action 來變更當前應用狀態。其次，action 就是普通對象，因此它們可以被日誌列印、序列化、儲存，以及用於調試或測試的後期回放。

• 使用純函數執行修改

  
  

  為每個 action 用純函數編寫 reducer 來描述如何修改 state 樹

  或許你是第一次聽到純函數這個概念，但它是函數話編程的基礎。

  純函數在維基百科上的解釋簡單來說是滿足以下兩項：

  1. 函數在有相同的輸入值時，產生相同的輸出

  2. 函數中不包含任何會產生副作用的語句

     在這裡，reducer 要做到只要傳入參數相同，返回計算得到的下一個 state 就一定相同。沒有特殊情況、沒有副作用，沒有 API 請求、沒有變數修改，只進行單純執行計算。

知道了三大原則之後，那就可以開始了解如何創建一個基於 Redux 的應用。

Action

就如之前提到的，action 是一個描述事件的簡單對象，它是改變 store 中 state 的唯一方法，它通過 store.dispatch() 方法來將 action 傳到 store 中。

下面就是一個 action 的例子，它表示添加一個新的 todo 項。

const ADD_TODO = ADD_TODO// action{ type: ADD_TODO, text: Build my first Redux app}

可以看到 action 就是一個簡單的 JavaScript 對象。

用一個字元串類型的 type 欄位來表示將要執行的動作，type 最好用常量來定義，當應用擴大時，可以使用單獨的模塊來存放 action。

除了 type 欄位外，action 對象的結構完全由你自己決定（也可以借鑒 flux-standard-action 來構建你的 action）。

在現實場景中，action 所傳遞的值很少會是一個固定的值，都是動態產生的。所以，要為每個 action 創建它的工廠方法，工廠方法返回一個 action 對象。

上面的那個例子就會變為：

function addTodo(text) { return { type: ADD_TODO, text }}

Action 的創建工廠可以是非同步非純函數。牽扯到非同步的問題內容就比較多，放到下一篇再分享了。

Reducer

Action 只是一個描述事件的簡單對象，並沒有告訴應用該如何更新 state，而這正是 reducer 的工作。

在 Redux 應用中，所有的 state 都被保存在一個單一對象中。所以，建議在寫代碼前先確定這個對象的結構。如何才能以最簡的形式把應用的 state 用對象描述出來？

在設計過程中，你會發現你有時需要在 state 中存儲一些如 UI 的 state，盡量將應用數據和 UI state 分開存放。

{ todos: [ { text: Consider using Redux, completed: true, }, { text: Keep all state in a single tree, completed: false } ]}

注意：在處理複雜應用時，建議儘可能地把 state 範式化，把所有數據放到一個對象里，每個數據以 ID 為主鍵，不同實體或列表間通過 ID 相互引用數據，這種方法在normalizr 文檔里有詳細闡述。

現在我們已經確定了 state 對象的結構，就可以開始開發 reducer。reducer 是一個純函數，它接收舊的 state 和 action，返回新的 state，就像這樣

(previousState, action) => newState

還記不記得三大原則？

沒錯，最後一點使用純函數進行修改，所以，永遠不要在 reducer 里做這些操作：

• 修改傳入的參數（即之前的 state 或 action 對象）
• 執行有副作用的操作，如 API 請求或路由跳轉
• 調用非純函數，如 Date.now() 或 Math.random() 等

將這些銘記於心後，就能創建對應之前 action 的 reducer 了。

const initialState = { todos: []}function todoApp(state = initialState, action) { switch (action.type) { case ADD_TODO: return { ...state, todos: [ ...state.todos, { text: action.text, completed: false } ] } default: return state }}

注意：

1. 不要修改傳入的 state，否則它就不是個純函數
2. 在遇到未知 action type 的時候，默認返回之前的 state

這樣一個 reducer 就創建好了，是不是很簡單？多個 action 也是如此，我們再來添加一個

case TOGGLE_TODO: return { ...state, todos: state.todos.map((todo, index) => { if (index === action.index) { return { ...todo, completed: !todo.completed } // 時刻謹記不要修改 state，保證 reducer 是純函數 } return todo }) }

從例子中可以發現，當對 state 的一部分進行操作時，不會影響 state 的其他部分，但仍需複製 state 樹的其他部分。當項目的規模成長時，state 樹的層次也會隨之增長，對樹深層節點的操作將會帶來大量的複製。

此時，我們就可以將這些相互獨立的 reducer 拆分開來，我們之前的例子就可以改成這樣(官網的例子更能體現這一點，為了縮減篇幅我這裡省略了另一個 reducer)。

// todos reducerfunction todos(state = [], action) { switch (action.type) { case ADD_TODO: return [ ...state, { text: action.text, completed: false } ] case TOGGLE_TODO: return state.map((todo, index) => { if (index === action.index) { return { ...todo, completed: !todo.completed } // 時刻謹記不要修改 state，保證 reducer 是純函數 } return todo }) default: return state }}// main reducerfunction todoApp(state = initialState, action) { switch (action.type) { case ADD_TODO: case TOGGLE_TODO: return { ...state, todos: todos(state.todos, action) } default: return state }}

這就是所謂的 reducer 合成，它是開發 Redux 應用的基礎。

注意：每個 reducer 應當只負責管理全局 state 中它負責的一部分；並且，每個 reducer 的 state 參數分別對應它管理的那部分 state。

由於，每個 reducer 應當只負責管理全局 state 中它負責的一部分，那麼上面的 main reducer 就能改為

// main reducerfunction todoApp(state = initialState, action) { return { todos: todos(state.todos, action) }}

最後，Redux 提供了 combineReducers() 工具類，它能幫我們減少很多重複的模板代碼。

combineReducers() 就像一個工廠，它根據傳入對象的 key 來篩選出 state 中 key 所對應的值傳給對應的 reducer，最終它返回一個符合規範的 reducer 函數。

最終，我們的 main reducer 就變為

// main reducerconst todoApp = combineReducers({ todos // 等價於 todos: todos(state.todos, action)})

隨著應用的膨脹，你可以將拆分後的 reducer 放到不同的文件中, 以保持其獨立性。然後，你的代碼就可以變成這樣...

import { combineReducers } from reduximport * as reducers from ./reducersconst todoApp = combineReducers(reducers)export default todoApp

Store

Store 用來存放整個應用的 state，並將 action 和 reducer 聯繫起來。它主要有以下幾個職能：

• 存儲整個應用的 state
• 提供 getState() 方法獲取 state
• 提供 dispatch(action) 方法更新 state
• 提供 subscribe(listener) 來註冊、取消監聽器

根據已有的 reducer 來創建 store 非常容易，只需將 reducer 作為參數傳遞給 createStore() 方法。

import { createStore } from reduximport todoApp from ./reducerslet store = createStore(todoApp)

這樣，整個應用的 store 就創建完成了。雖然還沒有界面，但我們已經可以測試數據處理邏輯了。

import { addTodo, toggleTodo } from ./actions// 列印初始狀態console.log(store.getState())// 註冊監聽器，在每次 state 更新時，列印日誌const unsubscribe = store.subscribe(() => console.log(store.getState()))// 發起 actionsstore.dispatch(addTodo(Learn about actions))store.dispatch(addTodo(Learn about reducers))store.dispatch(addTodo(Learn about store))store.dispatch(actions.toggleTodo(0))store.dispatch(actions.toggleTodo(1))// 停止監聽unsubscribe();

運行代碼，控制台中就能看到下面的輸出。

Data flow

時刻謹記一點：嚴格的單向數據流是 Redux 架構的設計核心。

也就是說，對 state 樹的任何修改都該通過 action 發起，然後經過一系列 reducer 組合的處理，最後返回一個新的 state 對象。

Take a try with Angular

之前的舉例已經將 redux 最基本的一套生命周期處理展示完畢了，但沒有個界面顯示總是不那麼令人信服。Redux 官網的例子是將 Redux 同 React 一起使用，但如同一開始說的，Redux 更是一套方法論，它不單可以和 React 一同使用，也可以和 Angular 等其他框架一同使用。

雖然，同官網用的是不同的框架，但概念是相通的。

首先，頁面都是由組件構成，組件又分為兩大類：容器組件（Smart/Container Components）和展示組件（Dumb/Presentational Components）。

簡單來說，容器組件就是通過 store.subscribe() 這個方法監聽 store 中 state 的變化，而展示組件，就是平常使用的普通的組件，只有一點需要注意的是，所有數據修改都是通過父組件中傳遞下來的 store.dispatch() 方法來修改。

可以說，容器組件是整個界面顯示的核心。

// todos/index.jsimport angular from angularimport template from ./todos.htmlimport controller from ./todosconst todoContainer = { controller, template}export default angular.module(todoContainer, []) .component(todoContainer, todoContainer) .name// todos/todos.jsimport store from ../../storeimport actions from ../../actionsexport default class TodosContainController { $onInit() { // 註冊監聽器，在每次 state 更新時，更新頁面綁定內容 this.unsubscribe = store.subscribe(() => { console.log(store.getState()) this.todos = store.getState().todos }) } addTodoItem(text) { store.dispatch(actions.addTodo(text)) } toggleTodoItem(index) { store.dispatch(actions.toggleTodo(index)) } $onDistory() { // 銷毀監聽器 this.unsubscribe() }} // todos/todos.html<div> <add-todo add-todo-fn="$ctrl.addTodoItem(text)"></add-todo> <todo-list todo-list="$ctrl.todos" toggle-todo-fn="$ctrl.toggleTodoItem(index)"></todo-list></div>

Redux 官網並不建議直接這樣使用 store.subscribe() 來監聽數據的變化，而是調用 React Redux 庫的 connect() 方法，因為 connect 方法做了許多性能上的優化。相對於 Angular，也有 ng-redux 和 ng2-redux 提供了相同的方法。

鑒於展示組件與 redux 並沒有太大的相關，就不在這裡贅述了，有興趣可以去 github上查看。

至此，一個簡單的基於 Angular 並運用 Redux 的 todo MVC 應用就完成了。

最後

如果你熟悉 Flux，那麼這篇圖文並茂的文章獲取會對你有很大的幫助。

如果你是和我一樣直接接觸 Redux，那官方文檔是你的首選。

當然，你一定得看看 Redux 作者 Dan Abramov 自己錄製的視頻，它會對你理解 Redux 有極大的幫助。

推薦閱讀：