自述

Redux 中文文檔

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

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

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

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

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

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

評(píng)價(jià)

“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 演講熱加載與時(shí)間旅行的時(shí)候，當(dāng)初的目標(biāo)是創(chuàng)建一個(gè)狀態(tài)管理庫(kù)，來(lái)提供最簡(jiǎn)化 API，但同時(shí)做到行為的完全可預(yù)測(cè)，因此才得以實(shí)現(xiàn)日志打印，熱加載，時(shí)間旅行，同構(gòu)應(yīng)用，錄制和重放，而不需要任何開發(fā)參與。

啟示

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

安裝

安裝穩(wěn)定版：

npm install --save redux

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

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

要點(diǎn)

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

就是這樣！

import { createStore } from 'redux';

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

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

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

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

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

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

文檔

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

示例

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

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

交流

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

感謝

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

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