Redux 中文文檔 · redux

# [Redux 中文文檔](http://github.com/camsong/redux-in-chinese) [![Join the chat at https://gitter.im/camsong/redux-in-chinese](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/camsong/redux-in-chinese?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge) > 在線 Gitbook 地址：http://cn.redux.js.org/ > 英文原版：http://redux.js.org/ > 學了這個還不盡興？推薦極精簡的 [Redux Tutorial 教程](https://github.com/react-guide/redux-tutorial-cn#redux-tutorial) Redux 是 JavaScript 狀態容器，提供可預測化的狀態管理。可以讓你構建一致化的應用，運行于不同的環境（客戶端、服務器、原生應用），并且易于測試。不僅于此，它還提供超爽的開發體驗，比如有一個[時間旅行調試器可以編輯后實時預覽](https://github.com/gaearon/redux-devtools)。 Redux 除了和 [React](https://facebook.github.io/react/) 一起用外，還支持其它界面庫。它體小精悍（只有2kB）且沒有任何依賴。 ### 評價 >[“Love what you’re doing with Redux”](https://twitter.com/jingc/status/616608251463909376) >Jing Chen，Flux 作者 >[“I asked for comments on Redux in FB's internal JS discussion group, and it was universally praised. Really awesome work.”](https://twitter.com/fisherwebdev/status/616286955693682688) >Bill Fisher，Flux 作者 >[“It's cool that you are inventing a better Flux by not doing Flux at all.”](https://twitter.com/andrestaltz/status/616271392930201604) >André Staltz，Cycle 作者 ### 開發經歷 Redux 的開發最早開始于我在準備 React Europe 演講[熱加載與時間旅行](https://www.youtube.com/watch?v=xsSnOQynTHs)的時候，當初的目標是創建一個狀態管理庫，來提供最簡化 API，但同時做到行為的完全可預測，因此才得以實現日志打印，熱加載，時間旅行，同構應用，錄制和重放，而不需要任何開發參與。 ### 啟示 Redux 由 [Flux](http://facebook.github.io/flux/) 演變而來，但受 [Elm](http://elm-lang.org/guide/architecture) 的啟發，避開了 Flux 的復雜性。不管你有沒有使用過它們，只需幾分鐘就能上手 Redux。 ### 安裝安裝穩定版： ``` npm install --save redux ``` 多數情況下，你還需要使用 [React 綁定庫](http://github.com/gaearon/react-redux)和[開發者工具](http://github.com/gaearon/redux-devtools)。 ``` npm install --save react-redux npm install --save-dev redux-devtools ``` ### 要點應用中所有的 state 都以一個對象樹的形式儲存在一個單一的 *store* 中。惟一改變 state 的辦法是觸發 *action*，一個描述發生什么的對象。為了描述 action 如何改變 state 樹，你需要編寫 *reducers*。就是這樣！ ```js 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 來重現它。 ### 文檔 * [介紹](http://camsong.github.io/redux-in-chinese//docs/introduction/index.html) * [基礎](http://camsong.github.io/redux-in-chinese//docs/basics/index.html) * [高級](http://camsong.github.io/redux-in-chinese//docs/advanced/index.html) * [技巧](http://camsong.github.io/redux-in-chinese//docs/recipes/index.html) * [排錯](http://camsong.github.io/redux-in-chinese//docs/Troubleshooting.html) * [詞匯表](http://camsong.github.io/redux-in-chinese//docs/Glossary.html) * [API 文檔](http://camsong.github.io/redux-in-chinese//docs/api/index.html) ### 示例 * [Counter](http://camsong.github.io/redux-in-chinese//docs/introduction/Examples.html#counter) ([source](https://github.com/rackt/redux/tree/master/examples/counter)) * [TodoMVC](http://camsong.github.io/redux-in-chinese//docs/introduction/Examples.html#todomvc) ([source](https://github.com/rackt/redux/tree/master/examples/todomvc)) * [Async](http://camsong.github.io/redux-in-chinese//docs/introduction/Examples.html#async) ([source](https://github.com/rackt/redux/tree/master/examples/async)) * [Real World](http://camsong.github.io/redux-in-chinese//docs/introduction/Examples.html#real-world) ([source](https://github.com/rackt/redux/tree/master/examples/real-world)) 如果你是 NPM 新手，創建和運行一個新的項目有難度，或者不知道上面的代碼應該放到哪里使用，請下載 [simplest-redux-example](https://github.com/jackielii/simplest-redux-example) 這個示例，它是一個集成了 React、Browserify 和 Redux 的最簡化的示例項目。 ### 交流打開 Slack，加入 [Reactiflux](http://reactiflux.com/) 中的 **#redux** 頻道。 ### 感謝 * [Elm 架構](https://github.com/evancz/elm-architecture-tutorial) 介紹了使用 reducers 來操作 state 數據； * [Turning the database inside-out](http://blog.confluent.io/2015/03/04/turning-the-database-inside-out-with-apache-samza/) 大開腦洞; * [ClojureScript 里使用 Figwheel](http://www.youtube.com/watch?v=j-kj2qwJa_E) for convincing me that re-evaluation should “just work”; * [Webpack](https://github.com/webpack/docs/wiki/hot-module-replacement-with-webpack) 熱模塊替換; * [Flummox](https://github.com/acdlite/flummox) 教我在 Flux 里去掉樣板文件和單例對象； * [disto](https://github.com/threepointone/disto) 演示使用熱加載 Stores 的可行性； * [NuclearJS](https://github.com/optimizely/nuclear-js) 證明這樣的架構性能可以很好； * [Om](https://github.com/omcljs/om) 普及 state 惟一原子化的思想。 * [Cycle](https://github.com/staltz/cycle) 介紹了 function 是如何在很多場景都是最好的工具； * [React](https://github.com/facebook/react) 實踐啟迪。 ### 貢獻者 > 定期更新，謝謝各位辛勤貢獻 * [Cam Song 會影@camsong](https://github.com/camsong) * [Jovey Zheng@jovey-zheng](https://github.com/jovey-zheng) * [Pandazki@pandazki](https://github.com/pandazki) * [Yuwei Wang@yuweiw823](https://github.com/yuweiw823) * [Desen Meng@demohi](https://github.com/demohi) * [Arcthur@arcthur](https://github.com/arcthur) * [Doray Hong@dorayx](https://github.com/dorayx) * [Guo Cheng@guocheng](https://github.com/guocheng) * [omytea](https://github.com/omytea) * [Fred Wang](https://github.com/namelos) * [Amo Wu](https://github.com/amowu) * [C. T. Lin](https://github.com/chentsulin) * [錢利江](https://github.com/timqian) * [云謙](https://github.com/sorrycc) * [denvey](https://github.com/denvey) * [三點](https://github.com/zousandian) * [Eric Wong](https://github.com/ele828) * [Owen Yang](https://github.com/owenyang0) * [Cai Huanyu](https://github.com/Darmody) **本文檔翻譯流程符合 [ETC 翻譯規范](https://github.com/react-guide/ETC)，歡迎你來一起完善**