Redux 中文文檔

在線 Gitbook 地址：http://camsong.github.io/redux-in-chinese/

英文原版：http://rackt.github.io/redux/

我們正在進(jìn)行 React Router 中文文檔 翻譯工作，歡迎加入我們

Redux 是 JavaScript 狀態(tài)容器，提供可預(yù)測化的狀態(tài)管理。

可以讓你構(gòu)建一致化的應(yīng)用，運行于不同的環(huán)境（客戶端、服務(wù)器、原生應(yīng)用），并且易于測試。不僅于此，它還提供超爽的開發(fā)體驗，比如有一個時間旅行調(diào)試器可以編輯后實時預(yù)覽。

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

評價

“Love what you’re doing with Redux”
Jing Chen，F(xiàn)lux 作者

“I asked for comments on Redux in FB's internal JS discussion group, and it was universally praised. Really awesome work.”
Bill Fisher，F(xiàn)lux 作者

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

開發(fā)經(jīng)歷

Redux 的開發(fā)最早開始于我在準(zhǔn)備 React Europe 演講熱加載與時間旅行的時候，當(dāng)初的目標(biāo)是創(chuàng)建一個狀態(tài)管理庫，來提供最簡化 API，但同時做到行為的完全可預(yù)測，因此才得以實現(xiàn)日志打印，熱加載，時間旅行，同構(gòu)應(yīng)用，錄制和重放，而不需要任何開發(fā)參與。

啟示

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

安裝

安裝穩(wěn)定版：

npm install --save redux

多數(shù)情況下，你還需要使用 React 綁定庫和開發(fā)者工具。

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

要點

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

就是這樣！

import { createStore } from 'redux';

/**
 * 這是一個 reducer，形式為 (state, action) => state 的純函數(shù)。
 * 描述了 action 如何把 state 轉(zhuǎn)變成下一個 state。
 *
 * state 的形式取決于你，可以是基本類型、數(shù)組、對象、
 * 甚至是 Immutable.js 生成的數(shù)據(jù)結(jié)構(gòu)。惟一的要點是
 * 當(dāng) state 變化時需要返回全新的對象，而不是修改傳入的參數(shù)。
 *
 * 下面例子使用 `switch` 語句和字符串來做判斷，但你可以寫幫助類(helper)
 * 根據(jù)不同的約定（如方法映射）來判斷，只要適用你的項目即可。
 */
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)。
// API 是 { subscribe, dispatch, getState }。
let store = createStore(counter);

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

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

你應(yīng)該把要做的修改變成一個普通對象，這個對象被叫做 action，而不是直接修改 state。然后編寫專門的函數(shù)來決定每個 action 如何改變應(yīng)用的 state，這個函數(shù)被叫做 reducer。

如果你以前使用 Flux，那么你只需要注意一個重要的區(qū)別。Redux 沒有 Dispatcher 且不支持多個 store。相反，只有一個單一的 store 和一個根級的 reduce 函數(shù)（reducer）。隨著應(yīng)用不斷變大，你應(yīng)該把根級的 reducer 拆成多個小的 reducers，分別獨立地操作 state 樹的不同部分，而不是添加新的 stores。這就像一個 React 應(yīng)用只有一個根級的組件，這個根組件又由很多小組件構(gòu)成。

用這個架構(gòu)開發(fā)計數(shù)器有點殺雞用牛刀，但它的美在于做復(fù)雜應(yīng)用和龐大系統(tǒng)時優(yōu)秀的擴(kuò)展能力。由于它可以用 action 追溯應(yīng)用的每一次修改，因此才有強大的開發(fā)工具。如錄制用戶會話并回放所有 action 來重現(xiàn)它。

文檔

• 介紹
• 基礎(chǔ)
• 高級
• 技巧
• 排錯
• 詞匯表
• API 文檔

示例

• Counter (source)
• TodoMVC (source)
• Async (source)
• Real World (source)

如果你是 NPM 新手，創(chuàng)建和運行一個新的項目有難度，或者不知道上面的代碼應(yīng)該放到哪里使用，請下載 simplest-redux-example 這個示例，它是一個集成了 React、Browserify 和 Redux 的最簡化的示例項目。

交流

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

感謝

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

本文檔翻譯流程符合 ETC 翻譯規(guī)范，歡迎你來一起完善