# [Redux 中文文檔](http://github.com/camsong/redux-in-chinese) [](https://gitter.im/camsong/redux-in-chinese?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge) [](https://travis-ci.org/camsong/redux-in-chinese) <img src='https://camo.githubusercontent.com/f28b5bc7822f1b7bb28a96d8d09e7d79169248fc/687474703a2f2f692e696d6775722e636f6d2f4a65567164514d2e706e67' height='60'> > 英文原版：http://redux.js.org/ > 學了這個還不盡興？推薦極精簡的 [Redux Tutorial 教程](https://github.com/react-guide/redux-tutorial-cn#redux-tutorial) > React 核心開發者寫的 [React 設計思想](https://github.com/react-guide/react-basic) > :離線下載：[pdf 格式](https://github.com/camsong/redux-in-chinese/raw/master/offline/redux-in-chinese.pdf)，[epub 格式](https://github.com/camsong/redux-in-chinese/raw/master/offline/redux-in-chinese.epub)，[mobi 格式](https://github.com/camsong/redux-in-chinese/raw/master/offline/redux-in-chinese.mobi) Redux 是 JavaScript 狀態容器，提供可預測化的狀態管理。 (如果你需要一個 WordPress 框架，請查看 [Redux Framework](https://reduxframework.com/)。) 可以讓你構建一致化的應用，運行于不同的環境（客戶端、服務器、原生應用），并且易于測試。不僅于此，它還提供 超爽的開發體驗，比如有一個[時間旅行調試器可以編輯后實時預覽](https://github.com/gaearon/redux-devtools)。 Redux 除了和 [React](https://facebook.github.io/react/) 一起用外，還支持其它界面庫。 它體小精悍（只有 2kB，包括依賴）。 ## 學習 Redux 我們會為你提供一系列廣泛的資源。無論你基礎如何，學習方式如何，這些資料都會幫助你學習 Redux。 ### 基礎 如果你剛剛開始學習 Redux，想要了解一些基礎概念，請看： - Redux 背后的 **[動機](https://cn.redux.js.org/docs/introduction/Motivation)**，**[核心概念](https://cn.redux.js.org/docs/introduction/coreconcepts)** 和 **[三大原則](https://cn.redux.js.org/docs/introduction/threeprinciples)**。 - **[Redux 文檔基礎教程](https://cn.redux.js.org/docs/basics)** - Redux 作者 Dan Abramov 的 **免費 ["Getting Started with Redux" 系列視頻](https://egghead.io/series/getting-started-with-redux)** - Redux 維護者 Mark Erikson 的 **["Redux Fundamentals" 幻燈片](http://blog.isquaredsoftware.com/2018/03/presentation-reactathon-redux-fundamentals/)** 以及 **[Redux 學習推薦資源列表](http://blog.isquaredsoftware.com/2017/12/blogged-answers-learn-redux/)** - 如果你喜歡直接瀏覽和運行代碼來學習的話，看看我們的 **[Redux 示例應用](https://cn.redux.js.org/docs/introduction/examples)** 列表，Redux repo 中也有相應的項目，同時提供 CodeSandbox 上的在線可交互示例。 - **[React/Redux links](https://github.com/markerikson/react-redux-links)** 中的 **[Redux Tutorials](https://github.com/markerikson/react-redux-links/blob/master/redux-tutorials.md)** 部分。下面是一些我們推薦的其中最好的文章： - Dave Ceddia 的文章 [What Does Redux Do? (and when should you use it?)](https://daveceddia.com/what-does-redux-do/) 以及 [How Redux Works: A Counter-Example](https://daveceddia.com/how-does-redux-work/)，這篇文章很好的介紹了 Redux 的基礎知識，如何與 React 一起使用。同時 [React and Redux: An Introduction](http://jakesidsmith.com/blog/post/2017-11-18-redux-and-react-an-introduction/) 也有異曲同工之處。 - Valentino Gagliardi 的文章 [React Redux Tutorial for Beginners: Learning Redux in 2018](https://www.valentinog.com/blog/react-redux-tutorial-beginners/) 很好的拓展了 Redux 各方面的介紹。 - CSS Tricks 上的這篇 [Leveling Up with React: Redux](https://css-tricks.com/learning-react-redux/) 也介紹了 Redux 的基礎。 - [DevGuides: Introduction to Redux](http://devguides.io/redux/) 這篇教程覆蓋了 Redux 方方面面，包括 actions，reducers，結合 React 以及 middleware。 ### 進階概念 當你了解了 action、reducer、store 的基本使用方法之后，你也許會在其他一些方面遇到問題，比如異步邏輯和 AJAX 請求、連接到 React 等 UI 庫、用 Redux 建立一個應用等等： - **[Redux 文檔“高級”部分](https://cn.redux.js.org/docs/advanced)** 包括異步邏輯、middleware、路由。 - Redux 文檔 **[“學習資源”](https://cn.redux.js.org/docs/introduction/LearningResources.html)** 中推薦了一些文章，覆蓋了 Redux 很多方面。 - Sophie DeBenedetto 的 8 個章節的 **[Building a Simple CRUD App with React + Redux](http://www.thegreatcodeadventure.com/building-a-simple-crud-app-with-react-redux-part-1/)** 教程，展示了如何從零開始建立一個 CURD（增刪改查）應用。 ### 真實世界使用 從一個 TodoMVC 應用過渡到一個真正的生產級別的應用是一個飛躍，但我們有很多資源可以幫到你： - Redux 作者 Dan Abramov 的 **[免費 “Building React Applications with Idiomatic Redux” 系列教程](https://egghead.io/courses/building-react-applications-with-idiomatic-redux)**，基于他本人第一季的視頻打造，涵蓋了諸如 middleware、路由、不變性等內容。 - **[Redux 常見問題](https://cn.redux.js.org/docs/faq)** 回答了一些常見問題，比如如何使用 Redux。**[文檔中“技巧”部分](https://cn.redux.js.org/docs/recipes)** 包含了處理衍生數據、測試、組織 reducer 邏輯、減少樣板代碼等方面的信息。 - Redux 維護者 Mark Erikson 的 **["Practical Redux" 教程系列](http://blog.isquaredsoftware.com/series/practical-redux/)** 演示了真實世界 React Redux 應用的進階技巧。（還在 **[Educative.io 上提供一個可交互版本](https://www.educative.io/collection/5687753853370368/5707702298738688)**） - **[React/Redux links](https://github.com/markerikson/react-redux-links)** 儲存了一些分類過的文章，包含 [reducer 和 selector](https://github.com/markerikson/react-redux-links/blob/master/redux-reducers-selectors.md)、[管理副作用](https://github.com/markerikson/react-redux-links/blob/master/redux-side-effects.md)、[Redux 架構與最佳實踐](https://github.com/markerikson/react-redux-links/blob/master/redux-architecture.md) 等等。 - 我們的社區創造了數以千計的 Redux 相關庫，插件和工具。[文檔的“生態系統”頁面](https://cn.redux.js.org/docs/introduction/ecosystem) 列舉了我們推薦的一些。在 **[Redux 插件目錄](https://github.com/markerikson/redux-ecosystem-links)** 有完整的列表。 - 如果你希望通過一個實際的應用代碼來學習的話，插件目錄中也有一個 **[出于特定目的構建的示例和真實世界應用](https://github.com/markerikson/redux-ecosystem-links/blob/master/apps-and-examples.md)** 列表。 最后，Mark Erikson 在 **[Workshop.me 教授了一系列工坊課程](#redux-workshops)**。查看[工坊時間表](https://workshop.me/?a=mark)獲取即將到來的時間地點安排。 ### 幫助和討論 **[Reactiflux Discord community](http://www.reactiflux.com)** 中的 **[#redux channel](https://discord.gg/0ZcbPKXt5bZ6au5t)** 是我們的官方資源，所有有關學習和使用 Redux 的問題都可以提問。Reactiflux 是您閑逛、提問、學習的好地方，來加入我們吧！ ## 開始之前 Redux 是負責組織 state 的工具，但你也要考慮它是否適合你的情況。不要因為有人告訴你要用 Redux 就去用，花點時間好好想想使用了 Redux 會帶來的好處或壞處。 在下面的場景中，引入 Redux 是比較明智的： - 你有著相當大量的、隨時間變化的數據 - 你的 state 需要有一個單一可靠數據來源 - 你覺得把所有 state 放在最頂層組件中已經無法滿足需要了 的確，這些場景很主觀籠統。因為對于何時應該引入 Redux 這個問題，對于每個使用者和每個應用來說都是不同的。 > **對于 Redux 應該如何、何時使用的更多建議，請看：** > > - **[“You Might Not Need Redux”](https://medium.com/@dan_abramov/you-might-not-need-redux-be46360cf367)** > - **[The Tao of Redux, Part 1 - Implementation and Intent](http://blog.isquaredsoftware.com/2017/05/idiomatic-redux-tao-of-redux-part-1/)** > - **[The Tao of Redux, Part 2 - Practice and Philosophy](http://blog.isquaredsoftware.com/2017/05/idiomatic-redux-tao-of-redux-part-2/)** > - **[Redux 常見問題](https://cn.redux.js.org/docs/faq)** ## 開發經歷 Dan Abramov（Redux 作者）在他準備 React Europe 演講[熱加載與時間旅行](https://www.youtube.com/watch?v=xsSnOQynTHs)時開始開發 Redux。他的目標是創建一個狀態管理庫，來提供最簡化 API，但同時做到行為的完全可預測，因此才得以實現日志打印，熱加載，時間旅行，同構應用，錄制和重放，而不需要任何開發參與。 ## 啟示 Redux 由 [Flux](http://facebook.github.io/flux/) 演變而來，但受 [Elm](http://elm-lang.org/guide/architecture) 的啟發，避開了 Flux 的復雜性。 不管你有沒有使用過它們，只需幾分鐘就能上手 Redux。 ## 安裝 安裝穩定版： ``` npm install --save redux ``` 以上基于使用 [npm](https://www.npmjs.com/) 來做包管理工具的情況下。 否則你可以直接在 [unpkg 上訪問這些文件](https://unpkg.com/redux/)，下載下來，或者把讓你的包管理工具指向它。 一般情況下人們認為 Redux 就是一些 [CommonJS](http://webpack.github.io/docs/commonjs.html) 模塊的集合。這些模塊就是你在使用 [Webpack](http://webpack.github.io/)、[Browserify](http://browserify.org/)、或者 Node 環境時引入的。如果你想追求時髦并使用 [Rollup](http://rollupjs.org/)，也是支持的。 你也可以不使用模塊打包工具。`redux` 的 npm 包里 [`dist` 目錄](https://unpkg.com/redux/dist/)包含了預編譯好的生產環境和開發環境下的 [UMD](https://github.com/umdjs/umd) 文件。可以直接使用，而且支持大部分流行的 JavaScript 包加載器和環境。比如，你可以直接在頁面上的 `<script>` 標簽 中引入 UMD 文件，也可以[讓 `Bower` 來安裝](https://github.com/reactjs/redux/pull/1181#issuecomment-167361975)。UMD 文件可以讓你使用 `window.Redux` 全局變量來訪問 Redux。 Redux 源文件由 ES2015 編寫，但是會預編譯到 CommonJS 和 UMD 規范的 ES5，所以它可以支持 [任何現代瀏覽器](http://caniuse.com/#feat=es5)。你不必非得使用 Babel 或模塊打包器來使用 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 ``` 需要提醒的是，和 Redux 不同，很多 Redux 生態下的包并不提供 UMD 文件，所以為了提升開發體驗，我們建議使用像 [Webpack](http://webpack.github.io/) 和 [Browserify](http://browserify.org/) 這樣的 CommonJS 模塊打包器。 ## 要點 應用中所有的 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 來重現它。 ## Redux 作者教你學 ### Dan Abramov 出品的 Redux 視頻教程 #### Redux 入門（Getting Started with Redux） [Redux 入門](https://egghead.io/series/getting-started-with-redux) 是由 Redux 作者 Dan Abramov 講述的包含 30 個視頻的課程。它涵蓋了本文檔的“基礎”部分，同時還有不可變（immutability）、測試、Redux 最佳實踐、搭配 React 使用的講解。**這個課程將永久免費。** > [“Great course on egghead.io by @dan_abramov - instead of just showing you how to use #redux, it also shows how and why redux was built!”](https://twitter.com/sandrinodm/status/670548531422326785) > Sandrino Di Mattia > [“Plowing through @dan_abramov 'Getting Started with Redux' - its amazing how much simpler concepts get with video.”](https://twitter.com/chrisdhanaraj/status/670328025553219584) > Chris Dhanaraj > [“This video series on Redux by @dan_abramov on @eggheadio is spectacular!”](https://twitter.com/eddiezane/status/670333133242408960) > Eddie Zaneski > [“Come for the name hype. Stay for the rock solid fundamentals. (Thanks, and great job @dan_abramov and @eggheadio!)”](https://twitter.com/danott/status/669909126554607617) > Dan > [“This series of videos on Redux by @dan_abramov is repeatedly blowing my mind - gunna do some serious refactoring”](https://twitter.com/gelatindesign/status/669658358643892224) > Laurence Roberts 還等什么？ #### [開始觀看 30 個免費視頻！](https://egghead.io/series/getting-started-with-redux) > 注意：如果你喜歡 Dan Abromov 的課程，可以考慮[購買訂閱](https://egghead.io/pricing)來支持 Egghead。訂閱者可以查看視頻中所有示例代碼，以及更多高級課程，包括深入 Javascript，React，Angular 等等。許多 [Egghead 導師](https://egghead.io/instructors) 也是開源項目作者，所以購買訂閱也是感謝他們的辛勤工作的一種方式。 #### 使用 Redux 構建 React 應用的常用實踐（Building React Applications with Idiomatic Redux） **[使用 Redux 構建 React 應用的常用實踐](https://egghead.io/courses/building-react-applications-with-idiomatic-redux)** 是 Dan Abramov 出品的第二個系列視頻。它從第一個視頻結束的地方開始，涵蓋了很多實用的手段，來構建生產級別 React 和 Redux 應用，包括：進階 state 管理、中間件（middleware）、集成 React Router 以及構建應用可能會遇到的其它問題。跟第一季一樣，**這個課程將永久免費。** #### [開始觀看免費 "Idiomatic Redux" 視頻](https://egghead.io/courses/building-react-applications-with-idiomatic-redux) ### Pratical Redux 課程 **[Practical Redux](https://www.educative.io/collection/5687753853370368/5707702298738688/)** 是 Redux 維護者 Mark Erikson 教授的付費課程。這個課程展示了如何使用 Redux 的基本概念來創建一個比 TodoMVC 更大一點的應用。包括以下一些真實世界問題： - 把 Redux 添加到一個 Create-React-App 創建的項目中，并配置模塊熱加載來加速開發 - 用 Redux 控制 UI - 使用 Redux-ORM 管理 Redux store 中的相關數據 - 建立一個 master/detail 模式來展示并編輯數據 - 自行編寫的高級 Redux reducer 邏輯來解決特定問題 - 對 Redux 連接的表單進行性能優化 還有更多內容！ 這個課程基于 Mark 原來的免費課程 **["Practical Redux" 教程系列](http://blog.isquaredsoftware.com/series/practical-redux/)** 之上，并改進更新了其內容。 ### Redux 基礎工坊（Redux Fundamentals Workshop） Redux 維護者 [Mark Erikson](https://twitter.com/acemarke) 建立了一個 [**Redux 基礎工坊**，幻燈片在這里](https://blog.isquaredsoftware.com/2018/06/redux-fundamentals-workshop-slides/)，包括如下內容： - Redux 的歷史及目的 - Reducer，action，使用 Redux store - 在 React 中使用 Redux - 使用并編寫 Redux middleware - 使用 AJAX 請求和其他副作用操作 - 為 Redux 應用編寫單元測試 - 真實世界中的 Redux 應用結構和開發 ## 文檔 - [介紹](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/FAQ.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-vanilla) ([source](https://github.com/rackt/redux/tree/master/examples/counter-vanilla)) - [Counter](http://camsong.github.io/redux-in-chinese/docs/introduction/Examples.html#counter) ([source](https://github.com/rackt/redux/tree/master/examples/counter)) - [Todos](http://camsong.github.io/redux-in-chinese/docs/introduction/Examples.html#todos) ([source](https://github.com/rackt/redux/tree/master/examples/todos)) - [可撤銷的 Todos](http://camsong.github.io/redux-in-chinese/docs/introduction/Examples.html#todos-with-undo) ([source](https://github.com/rackt/redux/tree/master/examples/todos-with-undo)) - [TodoMVC](http://camsong.github.io/redux-in-chinese/docs/introduction/Examples.html#todomvc) ([source](https://github.com/rackt/redux/tree/master/examples/todomvc)) - [購物車](http://camsong.github.io/redux-in-chinese/docs/introduction/Examples.html#shopping-cart) ([source](https://github.com/rackt/redux/tree/master/examples/shopping-cart)) - [Tree View](http://camsong.github.io/redux-in-chinese/docs/introduction/Examples.html#tree-view) ([source](https://github.com/rackt/redux/tree/master/examples/tree-view)) - [異步](http://camsong.github.io/redux-in-chinese/docs/introduction/Examples.html#async) ([source](https://github.com/rackt/redux/tree/master/examples/async)) - [Universal](http://camsong.github.io/redux-in-chinese/docs/introduction/Examples.html#universal) ([source](https://github.com/rackt/redux/tree/master/examples/universal)) - [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 的最簡化的示例項目。 ## 評價 > [“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 作者 ## 感謝 - [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) 實踐啟迪。 特別感謝 [Jamie Paton](http://jdpaton.github.io) 交出了 `redux` 這個 NPM 包名。 ## Logo 官方 Logo [在 Github 上可以找到](https://github.com/reduxjs/redux/tree/master/logo)。 ## 作者列表 > 定期更新，謝謝各位辛勤貢獻 - [Cam Song 會影@camsong](https://github.com/camsong) - [Jovey Zheng@jovey-zheng](https://github.com/jovey-zheng) - [Pandazki@pandazki](https://github.com/pandazki) - [Shangbin Yang@rccoder](https://github.com/rccoder) - [Doray Hong@dorayx](https://github.com/dorayx) - [Yuwei Wang@yuweiw823](https://github.com/yuweiw823) - [Yudong@hashtree](https://github.com/hashtree) - [Arcthur@arcthur](https://github.com/arcthur) - [Desen Meng@demohi](https://github.com/demohi) - [Zhe Zhang@zhe](https://github.com/zhe) - [alcat2008](https://github.com/alcat2008) - [Frozenme](https://github.com/Frozenme) - [姜楊軍@Yogi-Jiang](https://github.com/Yogi-Jiang) - [Byron Bai@happybai](https://github.com/happybai) - [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)