Redux 中文文件

本文件從建立之初，幫助了非常多的小夥伴學習 Redux，也收到了 Redux 作者 Dan 的多次點贊。目前每天瀏覽量大概在一萬左右。但由於幾位作者工作都比較忙，很多文件已經過期，卻也沒有時間更新。如果你有時間，希望你和我們一起翻譯，幫助更多人，歡迎提交 PR。不知何處下手不用怕？我們為你準備好了完善的 ETC 翻譯文件。:point_right: 回覆 issue 認領 https://github.com/camsong/redux-in-chinese/issues :heart: :heart: :heart:

線上 Gitbook 地址：http://cn.redux.js.org/

arrow_down: 離線下載：pdf 格式，epub 格式，mobi 格式
Redux 是 JavaScript 狀態容器，提供可預測化的狀態管理。

可以讓你構建一致化的應用，運行於不同的環境（客戶端、伺服器、原生應用），並且易於測試。不僅於此，它還提供 超爽的開發體驗，比如有一個時間旅行偵錯程式可以編輯後實時預覽。

Redux 除了和 React 一起用外，還支援其它介面庫。
它體小精悍（只有2kB）且沒有任何依賴。

評價

“Love what you’re doing with Redux”
Jing Chen，Flux 作者

“I asked for comments on Redux in FB’s internal JS discussion group, and it was universally praised. Really awesome work.”
Bill Fisher，Flux 作者

“It’s cool that you are inventing a better Flux by not doing Flux at all.”
André Staltz，Cycle 作者

開始之前

也推薦閱讀你可能並不需要Redux：
“You Might Not Need Redux”

開發經歷

Redux 的開發最早開始於我在準備 React Europe 演講熱載入與時間旅行的時候，當初的目標是建立一個狀態管理庫，來提供最簡化 API，但同時做到行為的完全可預測，因此才得以實現日誌列印，熱載入，時間旅行，同構應用，錄製和重放，而不需要任何開發參與。

啟示

Redux 由 Flux 演變而來，但受 Elm 的啟發，避開了 Flux 的複雜性。
不管你有沒有使用過它們，只需幾分鐘就能上手 Redux。

安裝

安裝穩定版：

npm install --save redux

以上基於使用 npm 來做包管理工具的情況下。

否則你可以直接在 unpkg 上訪問這些檔案，下載下來，或者把讓你的包管理工具指向它。

一般情況下人們認為 Redux 就是一些 CommonJS 模組的集合。這些模組就是你在使用 Webpack、Browserify、或者 Node 環境時引入的。如果你想追求時髦並使用 Rollup，也是支援的。

你也可以不使用模組打包工具。redux 的 npm 包裡 dist目錄 包含了預編譯好的生產環境和開發環境下的 UMD 檔案。可以直接使用，而且支援大部分流行的 JavaScript 包載入器和環境。比如，你可以直接在頁面上的 標籤 中引入 UMD 檔案，也可以讓 Bower 來安裝。UMD 檔案可以讓你使用 window.Redux 全域性變數來訪問 Redux。

Redux 原始檔由 ES2015 編寫，但是會預編譯到 CommonJS 和 UMD 規範的 ES5，所以它可以支援 任何現代瀏覽器。你不必非得使用 Babel 或模組打包器來使用 Redux。

附加包

多數情況下，你還需要使用 React 繫結庫和開發者工具。

npm install --save react-redux
npm install --save-dev redux-devtools

需要提醒的是，和 Redux 不同，很多 Redux 生態下的包並不提供 UMD 檔案，所以為了提升開發體驗，我們建議使用像 Webpack 和 Browserify 這樣的 CommonJS 模組打包器。

要點

應用中所有的 state 都以一個物件樹的形式儲存在一個單一的 store 中。
惟一改變 state 的辦法是觸發 action，一個描述發生什麼的物件。
為了描述 action 如何改變 state 樹，你需要編寫 reducers。

就是這樣！

import { createStore } from 'redux';

/**
 * 這是一個 reducer，形式為 (state, action) => state 的純函式。
 * 描述了 action 如何把 state 轉變成下一個 state。
 *
 * state 的形式取決於你，可以是基本型別、陣列、物件、
 * 甚至是 Immutable.js 生成的資料結構。惟一的要點是
 * 當 state 變化時需要返回全新的物件，而不是修改傳入的引數。
 *
 * 下面例子使用 `switch` 語句和字串來做判斷，但你可以寫幫助類(helper)
 * 根據不同的約定（如方法對映）來判斷，只要適用你的專案即可。
 */
function counter(state = 0, action) {
  switch (action.type) {
  case 'INCREMENT':
    return state + 1;
  case 'DECREMENT':
    return state - 1;
  default:
    return state;
  }
}

// 建立 Redux store 來存放應用的狀態。
// API 是 { subscribe, dispatch, getState }。
let store = createStore(counter);

// 可以手動訂閱更新，也可以事件繫結到檢視層。
store.subscribe(() =>
  console.log(store.getState())
);

// 改變內部 state 惟一方法是 dispatch 一個 action。
// action 可以被序列化，用日記記錄和儲存下來，後期還可以以回放的方式執行
store.dispatch({ type: 'INCREMENT' });
// 1
store.dispatch({ type: 'INCREMENT' });
// 2
store.dispatch({ type: 'DECREMENT' });
// 1

你應該把要做的修改變成一個普通物件，這個物件被叫做 action，而不是直接修改 state。然後編寫專門的函式來決定每個 action 如何改變應用的 state，這個函式被叫做 reducer。

如果你以前使用 Flux，那麼你只需要注意一個重要的區別。Redux 沒有 Dispatcher 且不支援多個 store。相反，只有一個單一的 store 和一個根級的 reduce 函式（reducer）。隨著應用不斷變大，你應該把根級的 reducer 拆成多個小的 reducers，分別獨立地操作 state 樹的不同部分，而不是新增新的 stores。這就像一個 React 應用只有一個根級的元件，這個根元件又由很多小元件構成。

用這個架構開發計數器有點殺雞用牛刀，但它的美在於做複雜應用和龐大系統時優秀的擴充套件能力。由於它可以用 action 追溯應用的每一次修改，因此才有強大的開發工具。如錄製使用者會話並回放所有 action 來重現它。

Redux 作者教你學

Redux 入門 是由 Redux 作者 Dan Abramov 講述的包含 30 個視訊的課程。它涵蓋了本文件的“基礎”部分，同時還有不可變（immutability）、測試、Redux 最佳實踐、搭配 React 使用的講解。這個課程將永久免費。

還等什麼？

開始觀看 30 個免費視訊！

文件

• 介紹
• 基礎
• 高階
• 技巧
• 常見問題
• 排錯
• 詞彙表

• API 文件
  
  示例

• 原生 Counter (source)

• Counter (source)
• Todos (source)
• 可撤銷的 Todos (source)
• TodoMVC (source)
• 購物車 (source)
• Tree View (source)
• 非同步 (source)
• Universal (source)
• Real World (source)
  如果你是 NPM 新手，建立和執行一個新的專案有難度，或者不知道上面的程式碼應該放到哪裡使用，請下載 simplest-redux-example 這個示例，它是一個集成了 React、Browserify 和 Redux 的最簡化的示例專案。

交流

開啟 Slack，加入 Reactiflux 中的 #redux 頻道。

感謝

• Elm 架構 介紹了使用 reducers 來操作 state 資料；
• Turning the database inside-out 大開腦洞;
• ClojureScript 裡使用 Figwheel for convincing me that re-evaluation should “just work”;
• Webpack 熱模組替換;
• Flummox 教我在 Flux 裡去掉樣板檔案和單例物件；
• disto 演示使用熱載入 Stores 的可行性；
• NuclearJS 證明這樣的架構效能可以很好；
• Om 普及 state 惟一原子化的思想。
• Cycle 介紹了 function 是如何在很多場景都是最好的工具；
• React 實踐啟迪。

作者列表

• 定期更新，謝謝各位辛勤貢獻
• Cam Song 會影@camsong
• Jovey [email protected]
• [email protected]
• Yuwei [email protected]
• [email protected]
• [email protected]
• Doray [email protected]
• Desen [email protected]
• Zhe [email protected]
• alcat2008
• Frozenme
• 姜楊軍@Yogi-Jiang
• Byron [email protected]
• Guo [email protected]
• omytea
• Fred Wang
• Amo Wu
• C. T. Lin
• 錢利江
• 雲謙
• denvey
• 三點
• Eric Wong
• Owen Yang
• Cai Huanyu