# 學習資源 Redux 文檔旨在教授 Redux 的基本概念，并解釋在實際應用程序中使用的關鍵概念。但是，文檔無法涵蓋所有內容。令人高興的是，還有許多其他很好的資源可用于學習 Redux。我們鼓勵你仔細查看一下。 其中許多內容涵蓋了超出文檔范圍的主題 , 或以可能更適合您學習方式的方法闡述相同的內容。 此頁面包含我們對可用于學習 Redux 的一些最佳外部資源的建議。有關 React，Redux，Javascript 和相關主題的其他大量教程，文章和其他資源，可以查看 [React/Redux Links list](https://github.com/markerikson/react-redux-links)。 ## 基礎介紹 ** 教授 Redux 基本概念以及如何使用它的教程 ** - **Redux 入門 —— 系列視頻 ** https://egghead.io/series/getting-started-with-redux https://github.com/tayiorbeii/egghead.io_redux_course_notes Redux 的創建者 Dan Abramov 在 30 個短片（2-5 分鐘）中展示了各種概念。鏈接的 Github 倉庫包含視頻的筆記和轉錄。 - ** 使用 Redux 的常用方式構建 React 應用程序 —— 系列視頻 ** https://egghead.io/series/building-react-applications-with-idiomatic-redux https://github.com/tayiorbeii/egghead.io_idiomatic_redux_course_notes Dan Abramov 的第二個視頻教程系列，第一個系列的續集。包括在 store 中初始化 state、如何和 React Router 一起使用、使用 “selector” function、狀態規范化、使用 Redux 中間件、異步 action creator 等課程。鏈接的 Github 倉庫包含視頻的筆記和轉錄。 - **Live React: 熱重載 and Time Travel** http://youtube.com/watch?v=xsSnOQynTHs Dan Abramov 在最初介紹了 Redux 的會議上的演講。了解 Redux 如何通過強制執行的約束實現 Time Travel 和熱重載。 - **Redux 卡通指南 ** https://code-cartoons.com/a-cartoon-intro-to-redux-3afb775501a6 一個 Redux 的高級描述，使用友好的漫畫來闡述 Redux 的理念。 - **Leveling Up with React: Redux** https://css-tricks.com/learning-react-redux/ 一個非常精心編寫的 Redux 及其相關概念的介紹，包含一些漂亮的卡通圖表。 - **Redux 簡介 ** https://www.smashingmagazine.com/2016/06/an-introduction-to-redux/ 概述和介紹 Redux 的基本概念。 使用 Redux 的好處，它與 MVC 或 Flux 的區別，以及它與函數式編程的關系。 - **Redux 教程 ** https://www.pshrmn.com/tutorials/react/redux/ 一個簡短明了的教程，介紹了基本的 Redux 術語，展示了如何拆分 reducer 函數，并描述了 Redux store API。 - **Redux：從 Twitter 大肆宣傳到生產環境 ** http://slides.com/jenyaterpil/redux-from-twitter-hype-to-production#/ 這是一個制作精良的幻燈片，直觀地介紹了 Redux 核心概念、與 React 的聯動、項目組織以及帶有 thunk 和 sagas 的副作用（side effect）。 用一些絕對 ** 極出色 ** 的動畫圖表演示了數據如何流經 React + Redux 架構。 - **DevGuides: 介紹 Redux** http://devguides.io/redux/ 一個涵蓋 Redux 的幾個方面的教程，包括 actions、reducers、與 React 的聯動和中間件。 ## 在 React 中使用 Redux ** 一些有關 React-Redux 綁定和`connect`函數的文章 ** - ** 為什么 Redux 在 React 應用程序中很有用 ** https://www.fullstackreact.com/articles/redux-with-mark-erikson/ 解釋使用 Redux 和 React 的一些好處，比如在組件和熱加載 (Hot Module Reloading) 之間共享數據。 * **Redux 可以做什么？（什么時候應該使用它？）** https://daveceddia.com/what-does-redux-do/ 關于 Redux 如何解決 React 應用程序中的數據流問題的總結。 * **Redux 如何工作：一個計數器的例子 ** https://daveceddia.com/how-does-redux-work/ 對前一篇文章的一個很好的后續。 它解釋了如何使用 Redux 和 React-Redux，首先顯示一個 React 組件，該組件在其內部狀態中存儲一個值，然后重構它以使用 Redux。在此過程中，本文解釋了重要的 Redux 術語和概念，以及它們如何組合在一起以使 Redux 數據流正常工作。 * **Redux and React: 簡介 ** http://jakesidsmith.com/blog/post/2017-11-18-redux-and-react-an-introduction/ 介紹 Redux 的核心概念，解釋如何使用 React-Redux 包將 Redux 與 React 一起使用。 ## 基于項目的教程 ** 通過構建項目來教授 Redux 概念的教程，包括更大的 “real world” 類型的應用程序 ** - ** 實用的 Redux** http://blog.isquaredsoftware.com/2016/10/practical-redux-part-0-introduction/ http://blog.isquaredsoftware.com/series/practical-redux/ 一系列正在發布的帖子旨在通過構建示例應用程序來演示一些特定的 Redux 技術，該應用程序基于用于管理 Battletech 活動的 MekHQ 應用程序。由 Redux 共同維護者 Mark Erikson 撰寫。涵蓋管理關系數據，連接多個組件和列表、功能的復雜 reducer 邏輯，處理表單，顯示模態對話框等主題。 - ** 使用 React + Redux 構建簡單的 CRUD 應用程序 ** http://www.thegreatcodeadventure.com/building-a-simple-crud-app-with-react-redux-part-1/ 這是一個精彩的含有 8 部分的系列教程，演示了如何構建 CRUD 應用程序，包括路由、AJAX 調用和各種 CRUD 方面。寫得很好，還有一些有用的圖表。 - ** 使用 React + Redux 構建的 Soundcloud 客戶端 ** http://www.robinwieruch.de/the-soundcloud-client-in-react-redux/ 詳細的演示了項目設置、路由、身份驗證、獲取遠程數據以及如何包裝有狀態庫（stateful library）。 - ** 全棧 Redux 教程 ** http://teropa.info/blog/2015/09/10/full-stack-redux-tutorial.html 這是一個全面、深入的教程，可構建完整的客戶端——服務器應用程序。 - **React，Redux 和 Immutable 入門：一個測試驅動的教程 ** http://www.theodo.fr/blog/2016/03/getting-started-with-react-redux-and-immutable-a-test-driven-tutorial-part-1/ http://www.theodo.fr/blog/2016/03/getting-started-with-react-redux-and-immutable-a-test-driven-tutorial-part-2/ 另一個堅實、深入的教程，類似于 “全棧 Redux 教程”。 構建一個僅有客戶端的 TodoMVC 應用程序，并演示一個良好的項目設置（包括基于 Mocha + JSDOM 的測試配置）。寫得很好，涵蓋了很多概念，而且非常容易理解。 - **Redux Hero：Redux 和 Reselect 簡介 ** https://decembersoft.com/posts/redux-hero-part-1-a-hero-is-born-a-fun-introduction-to-redux-js/ 通過構建一個小型 RPG 風格的游戲介紹 Redux 和相關的庫。 ## Redux 實現 ** 通過實現簡化版 Redux 來闡述 Redux 內部原理 ** - ** 自己打造一個 Redux** https://zapier.com/engineering/how-to-build-redux/ 這是一篇非常深入的 “構建迷你 Redux” 文章，它不僅涵蓋了 Redux 的核心，還涵蓋了`connect`和中間件。 - **Connect.js explained** https://gist.github.com/gaearon/1d19088790e70ac32ea636c025ba424e React-Redux 的`connect()`函數的一個非常簡化的版本，完成了`connect()`的基本的實現。 - ** 讓我們寫一個 Redux 吧 !** http://www.jamasoftware.com/blog/lets-write-redux/ 通過逐步編寫 Redux 的簡化版本來幫理解 Redux 的概念和實現。 ## Reducer ** 討論如何編寫 reducer 函數的文章 ** - ** 利用`combineReducers`** http://randycoulman.com/blog/2016/11/22/taking-advantage-of-combinereducers/ 使用`combineReducers`多次生成狀態樹的示例，以及關于如何權衡各種 reducer 邏輯的一些想法。 - ** 高階 Reducer 的力量 ** http://slides.com/omnidan/hor#/ 來自 redux-undo 和其他庫的作者的幻燈片演示，解釋了高階 Reducer 的概念以及如何使用它們 - ** 具有高階 Reducer 的 Reducer 組成 ** https://medium.com/@mange_vibration/reducer-composition-with-higher-order-reducers-35c3977ed08f 一些很好的例子，關于如何編寫可以組合在一起執行更大的特定 Reducer 任務的小函數，例如提供初始狀態、過濾、更新特定鍵等等。 - ** 高階 Reducer —— 只是聽起來很嚇人 ** https://medium.com/@danielkagan/high-order-reducers-it-just-sounds-scary-2b9e5dbfc705 解釋如何將 Reducer 像樂高積木一樣組合以創建可重復使用且可測試的 Reducer 邏輯。 ## Selector ** 如何以及為何使用 Selector 函數從 state 讀取值 ** - **Redux 的常用方式: 使用 Reselect Selector 實現封裝和高性能 ** https://blog.isquaredsoftware.com/2017/12/idiomatic-redux-using-reselect-selectors/ 一本完整指南，包含如何使用 Redux 的 Selector 函數、如何使用 Reselect 庫編寫優化 Selector 以及如何提高性能的高級技巧。 - **ReactCasts #8: Selectors in Redux** https://www.youtube.com/watch?v=frT3to2ACCw 概述了為什么以及如何使用 Selector 函數從 store 中檢索數據，以及如何從 store value 派生其他數據。 - ** 用 Reselect 優化 React Redux 應用程序開發 ** https://codebrahma.com/reselect-tutorial-optimizing-react-redux-application-development-with-reselect/ 關于 Reselect 的一個很好的教程。涵蓋了 “selector 函數” 的概念，如何使用 Reselect 的 API，以及如何使用 memoized selector 來提高性能。 - ** 在 React-Redux 應用程序中使用 Reselect** https://dashbouquet.com/blog/frontend-development/usage-of-reselect-in-a-react-redux-application 討論了 memoized selector 對性能的重要性，以及如何使用 Reselect 的良好實踐。 - **React, Reselect, and Redux** https://medium.com/@parkerdan/react-reselect-and-redux-b34017f8194c 解釋 Reselect 的 memoized selector 函數在 Redux 應用程序中是如何有用的，以及如何為每個組件實例創建唯一的 selector 實例。 ## 規范 ** 如何像數據庫一樣構建 Redux 存儲以獲得最佳性能 ** - ** 查詢 Redux Store** https://medium.com/@adamrackis/querying-a-redux-store-37db8c7f3b0f 在 Redux 中組織和存儲數據的最佳實踐，包括規范化數據和使用 selector 函數。 - ** 規范 Redux Store 以實現最大代碼重用 ** https://medium.com/@adamrackis/normalizing-redux-stores-for-maximum-code-reuse-ae6e3844ae95 關于規范化 Redux 存儲以實現一些有用的數據處理方法的想法，以及如何使用 selector 函數來對分層數據進行非規范化的示例。 - **Redux Normalizr: 改善你的 State 管理 ** http://www.robinwieruch.de/the-soundcloud-client-in-react-redux-normalizr/ 描述如何使用 Normalizr 改進 Redux 中嵌套數據的數據管理的教程。 - ** 高級 Redux 實體規范化 ** https://medium.com/@dcousineau/advanced-redux-entity-normalization-f5f1fe2aefc5 描述用于跟蹤狀態中實體子集的 “keyWindow” 概念，類似于 SQL“視圖”。標準化數據概念的有用擴展。 ## 中間件 ** 中間件如何工作以及如何編寫它們的解釋和示例 ** - ** 探索 Redux 中間件 ** http://blog.krawaller.se/posts/exploring-redux-middleware/ 通過一系列小實驗了解中間件 - **Redux 中間件教程 ** http://www.pshrmn.com/tutorials/react/redux-middleware/ 概述了什么是中間件，`applyMiddleware`是如何工作的，以及如何編寫中間件。 - **ReactCasts #6: Redux 中間件 ** https://www.youtube.com/watch?v=T-qtHI1qHIg 一個視頻，描述了中間件如何融入 Redux、中間件的用途以及如何實現自定義中間件。 - **Redux 中間件初學者指南 ** https://www.codementor.io/reactjs/tutorial/beginner-s-guide-to-redux-middleware 中間件用例的有用解釋，有大量示例。 ## 副作用 (Side Effect) —— 基礎 ** 介紹如何在 Redux 中處理異步行為 ** - **Stack Overflow: Dispatching Redux Actions with a Timeout** http://stackoverflow.com/questions/35411423/how-to-dispatch-a-redux-action-with-a-timeout/35415559#35415559 Dan Abramov 解釋了在 Redux 中管理異步行為的基礎知識，介紹了一系列漸進式方法（內聯異步調用，異步 action creators，thunk 中間件）。 - **Stack Overflow: 為什么我們在 Redux 中需要用于異步流的中間件？** http://stackoverflow.com/questions/34570758/why-do-we-need-middleware-for-async-flow-in-redux/34599594#34599594 Dan Abramov 給出了使用 thunks 和異步中間件的原因，以及一些使用 thunk 的有用模式。 - ** 什么是 “thunk”？** https://daveceddia.com/what-is-a-thunk/ 快速解釋一下 “thunk” 這個詞的含義，以及 Redux 的具體含義。 - **Thunks in Redux: The Basics** https://medium.com/fullstack-academy/thunks-in-redux-the-basics-85e538a3fe60 詳細了解一下 thunk 是什么，他們解決了什么，以及如何使用它們。 ## 副作用 (Side Effect) —— 進階 ** 用于管理異步行為的進階工具和技術 ** - ** 在 Redux 中進行異步操作的正確方法是什么？** https://decembersoft.com/posts/what-is-the-right-way-to-do-asynchronous-operations-in-redux/ 查看最流行的 Redux 副作用 (Side Effect) 庫，并比較每個庫的工作方式。 - **Redux 的四種異步工具 ** https://medium.com/react-native-training/redux-4-ways-95a130da0cdc 使用 thunks，sagas，observables 和 promise 中間件實現一些基本數據獲取的并排比較。 - **Redux 的常用方式: 關于 Thunk、Saga、抽象和可重用性的思考 ** http://blog.isquaredsoftware.com/2017/01/idiomatic-redux-thoughts-on-thunks-sagas-abstraction-and-reusability/ 對幾個 “thunk 不好” 問題的回應，認為 thunk（和 saga）仍然是管理復雜同步邏輯和異步副作用 (Side Effect) 的有效方法。 - **Javascript 利器: Redux-Saga** http://formidable.com/blog/2017/javascript-power-tools-redux-saga/ http://formidable.com/blog/2017/composition-patterns-in-redux-saga/ http://formidable.com/blog/2017/real-world-redux-saga-patterns/ 這是一個精彩的系列，講述了 Redux-Saga 背后的概念、實現和優勢，包括如何使用 ES6 generator 來控制功能流、如何將 saga 組合在一起以實現并發以及實際的 saga 使用案例。 - ** 探索 Redux Saga** https://medium.com/onfido-tech/exploring-redux-sagas-cc1fca2015ee 這篇文章探討了如何使用 saga 提供粘合層以在 Redux 應用程序中實現解耦業務邏輯。 - ** 馴服 Redux 與 Saga** https://objectpartners.com/2017/11/20/taming-redux-with-sagas/ Redux-Saga 的一個很好的概述，包括 generator functions 的信息、saga 的使用案例、使用 saga 來處理 promise 以及測試 saga。 - **Reactive Redux State with RxJS** https://ivanjov.com/reactive-redux-state-with-rxjs/ 描述了 “Reactive Programming” 和 RxJS 庫的概念，并展示了如何使用 redux-observable 來獲取數據，以及測試示例。 - ** 使用 redux-observable 處理 Redux 中的異步邏輯 ** https://medium.com/dailyjs/using-redux-observable-to-handle-asynchronous-logic-in-redux-d49194742522 一個擴展的帖子，用于比較基于 observable 和基于 thunk 實現處理線條繪制示例的不同之處。 ## Thinking in Redux ** 更深入地了解 Redux 的使用方式，以及它為何如此工作 ** - ** 你可能不需要 Redux** https://medium.com/@dan_abramov/you-might-not-need-redux-be46360cf367 Dan Abramov 的一些是否需要使用 Redux 的看法。 - **Redux 的常用方式: Redux 之道，第 1 部分——實現和意圖 ** http://blog.isquaredsoftware.com/2017/05/idiomatic-redux-tao-of-redux-part-1/ 深入探討 Redux 的實際工作方式，它要求您遵循的約束條件，以及其設計和使用背后的意圖。 - **Redux 的常用方式: Redux 之道，第 2 部分——實踐和理念 ** http://blog.isquaredsoftware.com/2017/05/idiomatic-redux-tao-of-redux-part-2/ 后續探討了為什么存在常見的 Redux 使用模式，可以使用 Redux 的其他方式，以及這些不同模式和方法的優缺點。 - **What's So Great About Redux？** https://medium.freecodecamp.org/whats-so-great-about-redux-ac16f1cc0f8b https://storify.com/acemarke/redux-pros-cons-and-limitations https://twitter.com/modernserf/status/886426115874717697 對 Redux 如何與 OOP 和消息傳遞進行比較的深入而有趣的分析，Redux 的典型使用方式可以轉向具有更多樣板的類似 Java 的 “setter” 函數，以及對更高級別的 “blessed” 抽象的請求。Redux 讓您更容易與新手一起工作和學習。非常值得一讀。作者最初寫了一個 tweetstorm（它在 Storify 鏈接中），并寫了博客文章以擴展這些想法。最后，他在另一篇較短的推文帖子中對抽象與具體例子進行了更多的思考。 ## Redux 架構 ** 用于構建大型 Redux 應用程序的模式和實踐 ** - ** 在構建應用程序 state 時避免意外復雜性 ** https://hackernoon.com/avoiding-accidental-complexity-when-structuring-your-app-state-6e6d22ad5e2a 一套出色的如何組織 Redux state 結構的指南。 - **Redux Step by Step: 適用于真實應用程序的簡單而強大的工作流程 ** https://hackernoon.com/redux-step-by-step-a-simple-and-robust-workflow-for-real-life-apps-1fdf7df46092 “意外復雜性” 一文的后續部分，討論組織 Redux state 的原則 - ** 我希望我知道的那些關于 Redux 的事 ** https://medium.com/horrible-hacks/things-i-wish-i-knew-about-redux-9924abf2f9e0 https://www.reddit.com/r/javascript/comments/4taau2/things_i_wish_i_knew_about_redux/ 分享了使用 Redux 構建應用程序后獲得的一些優秀技巧和經驗教訓。包括有關連接組件、選擇數據、應用程序結構和項目結構的信息。Reddit 上有更多的討論。 - **React+Redux: 有關如何實現代碼干凈、可靠和具有可維護的提示和最佳實踐 ** https://speakerdeck.com/goopscoop/react-plus-redux-tips-and-best-practices-for-clean-reliable-and-scalable-code 一個出色的幻燈片，提供各種提示和建議，包括簡化 action 創建和減少 reducer 中的數據操作，抽象 API 調用，避免 props 傳遞等等。 - **Redux 用于大型 Web 應用程序中的狀態管理 ** https://www.mapbox.com/blog/redux-for-state-management-in-large-web-apps/ 優秀的討論和常用的 Redux 架構示例，以及 Mapbox 如何將這些方法應用于他們的 Mapbox Studio 應用程序。 ## 應用和示例 - **React-Redux RealWorld Example: TodoMVC for the Real World** https://github.com/GoThinkster/redux-review 使用 Redux 構建的全棧 “real world” 應用程序示例。類似 medium 的社交博客網站 Demo，其中包括 JWT 身份驗證，CRUD，收藏文章，關注用戶，路由等。RealWorld 項目還包括網站前端和后端的許多其他實現，包括同一項目、API 規范的服務器端和客戶端實現的比較。 - **Project Mini-Mek** https://github.com/markerikson/project-minimek 一個應用程序示例，演示各種有用的 Redux 技術，“Practical Redux” 博客系列 http://blog.isquaredsoftware.com/series/practical-redux - **react-redux-yelp-clone** https://github.com/mohamed-ismat/react-redux-yelp-clone 使用 react 技術棧完成的 “Yelp clone” 應用。它通過使用 Redux 和 Redux-Saga 而不是本地狀態，以及 React Router v4、樣式組件和其他現代標準來擴展原始版本。基于 React-Boilerplate starter kit。 - **WordPress-Calypso** https://github.com/Automattic/wp-calypso 新的基于 JavaScript 和 API 的 WordPress.com - **Sound-Redux** https://github.com/andrewngu/sound-redux 使用 React/Redux 構建的 Soundcloud 客戶端 - **Webamp** https://webamp.org https://github.com/captbaritone/webamp Winamp2 的瀏覽器版本，用 React 和 Redux 構建。實際上播放 MP3，并允許您加載本地 MP3 文件。 - **Tello** https://github.com/joshwcomeau/Tello 一種簡單而愉快的方式來跟蹤和管理電視節目 - **io-808** https://github.com/vincentriemer/io-808 試圖完全重建基于網絡的 TR-808 drum machine ## Redux 文檔翻譯 - [中文文檔](http://camsong.github.io/redux-in-chinese/) — Chinese - [繁體中文文件](https://github.com/chentsulin/redux) — Traditional Chinese - [Redux in Russian](https://github.com/rajdee/redux-in-russian) — Russian - [Redux en Espa?ol](http://es.redux.js.org/) - Spanish ## 書籍 - **Redux in Action** https://www.manning.com/books/redux-in-action 這本綜合性書籍涵蓋了使用 Redux 的許多關鍵方面，包括 reducers 和 actions 的基礎知識以及與 React 的聯動、復雜的中間件和副作用、應用程序結構、性能、測試等等。很好地解釋了使用 Redux 的許多方法的優點、缺點和如何權衡。由 Redux co-maintainer Mark Erikson 親自推薦。 - **The Complete Redux Book** https://leanpub.com/redux-book 如何在生產環境中管理大型 state？為什么我需要 store enhancers？處理表單驗證的最佳實踐是什么？使用簡單的術語和示例代碼，獲得所有這些問題以及更多問題的答案。了解使用 Redux 構建復雜且可投入生產的 Web 應用程序所需的一切。(提示: 現在永久免費 !) ## 課程 - **Modern React with Redux, by Stephen Grider (付費)** https://www.udemy.com/react-redux/ 使用本教程能夠學習開發應用時如何將 React、Redux 與 React-Router、Webpack、ES6 同時使用的基礎知識。本課程將幫助您快速啟動并運行，并教您深入理解使用 Redux 時如何構建 React 組件和如何處理應用程序結構。 - **Redux, by Tyler McGinnis (付費)** https://tylermcginnis.com/courses/redux/ 在學習 Redux 時，您需要在足夠復雜的應用程序環境中才能感受到 Redux 帶來的好處。這就是為什么這門課程很大。一個更好的名字可能會是 **Real World Redux** 。如果您厭倦了類似 “Todo list” 的 Redux 教程，那么您來對了地方。在本課程中，我們將討論 Redux 在您的應用程序中管理狀態的特殊之處。我們將構建一個實際的 “真實世界” 應用程序，以便您可以學到 Redux 如何處理 optimistic updates 和錯誤捕獲等邊緣情況。我們還將介紹許多其他適用于 Redux，Firebase 和 CSS Modules 的技術。 - **Learn Redux, by Wes Bos (免費)** https://learnredux.com/ 一個構建 'Reduxstagram' 的視頻課程 —— 一個簡單的照片應用程序，將簡化 Redux，React Router 和 React.js 背后的核心思想。 ## 更多資源 - [React-Redux Links](https://github.com/markerikson/react-redux-links) 是 React、Redux、ES6 等高質量文章、教程和相關內容的精選列表。 - [Redux Ecosystem Links](https://github.com/markerikson/redux-ecosystem-links) 是 Redux 相關庫、插件和實用程序的分類集合。 - [Awesome Redux](https://github.com/xgrommx/awesome-redux) 是與 Redux 相關的庫的列表。 - [DEV Community](https://dev.to/t/redux) 是一個分享 Redux 項目、文章和教程以及討論并詢問有關 Redux 問題的地方。 歡迎各種技術水平的開發人員參加。