学习资源
Redux 文档旨在教授 Redux 的基本概念,并解释在实际应用中使用的关键概念。但是,文档无法涵盖所有内容。幸运的是,还有许多其他很棒的资源可供学习 Redux。我们鼓励您查看它们。其中许多涵盖了超出文档范围的主题,或者以其他方式描述相同的主题,这些方式可能更适合您的学习风格。
此页面包含我们对一些最佳外部资源的推荐,这些资源可用于学习 Redux。有关 React、Redux、Javascript 和相关主题的更多教程、文章和其他资源的扩展列表,请参阅 React/Redux 链接列表。
基本介绍
教授 Redux 基本概念和使用方法的教程
React、Redux 和 TypeScript 入门
https://blog.isquaredsoftware.com/2020/12/presentations-react-redux-ts-intro/
Redux 维护者 Mark Erikson 的幻灯片集,涵盖了 React、Redux 和 TypeScript 的基础知识。Redux 主题包括存储、reducer、中间件、React-Redux 和 Redux Toolkit。学习现代 Redux - Redux Toolkit、React-Redux Hooks 和 RTK Query
https://www.learnwithjason.dev/let-s-learn-modern-redux
"Learn with Jason" 节目的一个片段,Redux 维护者 Mark Erikson 作为嘉宾。本集节目展示了一个现场编码的应用程序,并展示了如何创建一个新的 React+TS 项目,添加 Redux 包,并从头开始设置 Redux Toolkit 和 React-Redux(包括我们推荐的 TS hooks 配置)。它还展示了如何使用即将推出的 RTK Query 数据获取 API 并在 UI 中显示这些数据。Redux 教程:概述和演练
https://www.taniarascia.com/redux-react-guide/
Tania Rascia 写的一篇写得很好的教程,它快速解释了 Redux 的关键概念,并展示了如何使用原生 Redux 和 Redux Toolkit 将一个基本的 Redux + React 应用程序组合在一起。Redux 入门 - 学习 Redux 的脑友好指南
https://www.freecodecamp.org/news/redux-for-beginners-the-brain-friendly-guide-to-redux/
一个易于理解的教程,它使用 Redux Toolkit 和 React-Redux 构建一个小型待办事项应用程序,包括数据获取。使用 Redux Toolkit 和 TypeScript 简化 Redux
https://www.mattbutton.com/redux-made-easy-with-redux-toolkit-and-typescript/
一个有用的教程,展示了如何将 Redux Toolkit 和 TypeScript 结合使用来编写 Redux 应用程序,以及 RTK 如何简化典型的 Redux 使用。Redux:从 Twitter 热门话题到生产
https://slides.com/jenyaterpil/redux-from-twitter-hype-to-production#/
一个制作精良的幻灯片,以视觉方式逐步介绍 Redux 的核心概念、与 React 的使用、项目组织以及使用 thunk 和 saga 进行副作用处理。包含一些很好的动画图表,演示了数据如何在 React+Redux 架构中流动。
在 React 中使用 Redux
对 React-Redux 绑定库的解释
使用 React-Redux Hooks 现代化遗留 Redux 应用程序
https://app.egghead.io/playlists/modernizing-a-legacy-redux-application-with-react-hooks-c528
一个视频系列,展示了早期connect
API 和较新的 React-Redux hooks API 之间的区别,以及如何在组件中使用这些 hooks。为什么 Redux 在 React 应用程序中很有用
https://www.fullstackreact.com/articles/redux-with-mark-erikson/
解释了在 React 中使用 Redux 的一些好处,包括在组件之间共享数据和热模块重载。
基于项目的教程
通过构建项目来教授 Redux 概念的教程,包括更大的“现实世界”类型的应用程序
- 实用 Redux
https://blog.isquaredsoftware.com/2016/10/practical-redux-part-0-introduction/
https://blog.isquaredsoftware.com/series/practical-redux/
本系列文章旨在通过构建一个基于 MekHQ 应用的示例应用程序来演示一些具体的 Redux 技术,用于管理 Battletech 战役。由 Redux 联合维护者 Mark Erikson 撰写。涵盖了诸如管理关系数据、连接多个组件和列表、复杂功能的 reducer 逻辑、处理表单、显示模态对话框等等主题。(注意:这是一个较旧的系列,今天我们推荐使用更新的模式来编写 Redux 代码。但是,本系列中的许多原则仍然很有价值。)
Redux 实现
通过编写微型重新实现来解释 Redux 的内部工作原理
Redux 入门 - 视频系列
https://egghead.io/courses/fundamentals-of-redux-course-from-dan-abramov-bd5cc867
https://github.com/tayiorbeii/egghead.io_redux_course_notes
Redux 的创建者 Dan Abramov 在 30 个简短的(2-5 分钟)视频中演示了各种概念。链接的 Github 仓库包含视频的笔记和文字记录。使用惯用 Redux 构建 React 应用程序 - 视频系列
https://egghead.io/courses/building-react-applications-with-idiomatic-redux
https://github.com/tayiorbeii/egghead.io_idiomatic_redux_course_notes
Dan Abramov 的第二个视频教程系列,直接接续第一个系列。包括关于存储初始状态、将 Redux 与 React Router 结合使用、使用“选择器”函数、规范化状态、使用 Redux 中间件、异步操作创建者等等的课程。链接的 Github 仓库包含视频的笔记和文字记录。实时 React:热重载和时间旅行
https://youtube.com/watch?v=xsSnOQynTHs
Dan Abramov 最初的会议演讲,介绍了 Redux。了解 Redux 强制执行的约束如何使热重载与时间旅行变得容易自己构建一个 Redux
https://zapier.com/engineering/how-to-build-redux/
一篇优秀的深入“构建一个迷你 Redux”文章,不仅涵盖了 Redux 的核心,还涵盖了connect
和中间件。Connect.js 解释
https://gist.github.com/gaearon/1d19088790e70ac32ea636c025ba424e
React Redux 的connect()
函数的极简版本,说明了基本实现让我们编写 Redux!
https://www.jamasoftware.com/blog/lets-write-redux/
逐步讲解编写 Redux 的迷你版本,以帮助解释概念和实现。
Reducers
讨论编写 reducer 函数方法的文章
利用
combineReducers
https://randycoulman.com/blog/2016/11/22/taking-advantage-of-combinereducers/
使用combineReducers
多次来生成状态树的示例,以及对各种 reducer 逻辑方法的权衡的一些思考。高阶 Reducers 的力量
https://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 逻辑。
选择器
解释如何以及为什么使用选择器函数从状态中读取值
惯用的 Redux:使用 Reselect 选择器进行封装和性能优化
https://blog.isquaredsoftware.com/2017/12/idiomatic-redux-using-reselect-selectors/
一份完整的指南,介绍了为什么应该在 Redux 中使用选择器函数,如何使用 Reselect 库编写优化的选择器,以及提高性能的进阶技巧。ReactCasts #8:Redux 中的选择器
https://www.youtube.com/watch?v=frT3to2ACCw
一个关于为什么以及如何使用选择器函数从存储中检索数据,以及如何从存储值中派生附加数据的优秀概述。使用 Reselect 优化 React Redux 应用程序开发
https://codebrahma.com/reselect-tutorial-optimizing-react-redux-application-development-with-reselect/
一篇关于 Reselect 的优秀教程。涵盖了“选择器函数”的概念,如何使用 Reselect 的 API,以及如何使用记忆化选择器来提高性能。在 React-Redux 应用程序中使用 Reselect
https://dashbouquet.com/blog/frontend-development/usage-of-reselect-in-a-react-redux-application
讨论了记忆化选择器对于性能的重要性,以及使用 Reselect 的良好实践。React、Reselect 和 Redux
https://medium.com/@parkerdan/react-reselect-and-redux-b34017f8194c
解释了 Reselect 的记忆化选择器函数在 Redux 应用程序中如何有用,以及如何为每个组件实例创建唯一的选择器实例。
规范化
如何像数据库一样构建 Redux 存储以获得最佳性能
查询 Redux 存储
https://medium.com/@adamrackis/querying-a-redux-store-37db8c7f3b0f
介绍了在 Redux 中组织和存储数据的最佳实践,包括数据规范化和选择器函数的使用。规范化 Redux 存储以实现最大代码重用
https://medium.com/@adamrackis/normalizing-redux-stores-for-maximum-code-reuse-ae6e3844ae95
关于如何规范 Redux 存储以实现最大代码重用的思考,并举例说明如何使用选择器函数对分层数据进行反规范化。高级 Redux 实体规范化
https://medium.com/@dcousineau/advanced-redux-entity-normalization-f5f1fe2aefc5
描述了用于跟踪状态中实体子集的“keyWindow”概念,类似于 SQL 的“视图”。这是对规范化数据概念的有用扩展。
中间件
关于中间件的工作原理以及如何编写中间件的解释和示例
探索 Redux 中间件
https://blog.krawaller.se/posts/exploring-redux-middleware/
通过一系列小型实验来理解中间件Redux 中间件教程
https://github.com/pshrmn/notes/blob/master/redux/redux-middleware.md
概述了中间件是什么,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
对中间件用例的实用解释,并附有大量示例JavaScript 中的函数组合
https://joecortopassi.com/articles/functional-composition-in-javascript/
分解compose
函数的工作原理
副作用 - 基础
介绍如何在 Redux 中处理异步行为
Stack Overflow:使用超时调度 Redux 操作
https://stackoverflow.com/questions/35411423/how-to-dispatch-a-redux-action-with-a-timeout/35415559#35415559
Dan Abramov 解释了在 Redux 中管理异步行为的基础知识,并逐步介绍了一系列方法(内联异步调用、异步操作创建者、thunk 中间件)。Stack Overflow:为什么我们需要中间件来处理 Redux 中的异步流程?
https://stackoverflow.com/questions/34570758/why-do-we-need-middleware-for-async-flow-in-redux/34599594#34599594
Dan Abramov 给出了使用 thunk 和异步中间件的原因,以及一些使用 thunk 的有用模式。什么是“thunk”?
https://daveceddia.com/what-is-a-thunk/
简要解释了“thunk”这个词在一般情况下和在 Redux 中的具体含义。Redux 中的 Thunk:基础
https://medium.com/fullstack-academy/thunks-in-redux-the-basics-85e538a3fe60
详细介绍了 thunk 是什么,它们解决了什么问题以及如何使用它们。
副作用 - 高级
管理异步行为的高级工具和技术
在 Redux 中进行异步操作的正确方法是什么?
https://decembersoft.com/posts/what-is-the-right-way-to-do-asynchronous-operations-in-redux/
这篇优秀的文章介绍了 Redux 副作用中最受欢迎的库,并比较了它们各自的工作原理。Redux 四种方式
https://medium.com/react-native-training/redux-4-ways-95a130da0cdc
并排比较使用 thunk、saga、observable 和 promise 中间件实现一些基本数据获取的方法。惯用的 Redux:关于 Thunk、Saga、抽象和可重用性的思考
https://blog.isquaredsoftware.com/2017/01/idiomatic-redux-thoughts-on-thunks-sagas-abstraction-and-reusability/
对一些“thunk 不好”的担忧的回应,认为 thunk(和 saga)仍然是管理复杂同步逻辑和异步副作用的有效方法。Javascript 强力工具:Redux-Saga
https://formidable.com/blog/2017/javascript-power-tools-redux-saga/
https://formidable.com/blog/2017/composition-patterns-in-redux-saga/
https://formidable.com/blog/2017/real-world-redux-saga-patterns/
一个很棒的系列,它讲解了 Redux-Saga 背后的概念、实现和优势,包括如何使用 ES6 生成器来控制函数流,如何将 saga 组合在一起以实现并发,以及 saga 的实际用例。探索 Redux Saga
https://medium.com/onfido-tech/exploring-redux-sagas-cc1fca2015ee
一篇优秀的文章,探讨了如何使用 saga 来提供一个粘合层,在 Redux 应用程序中实现解耦的业务逻辑。用 Saga 驯服 Redux
https://objectpartners.com/2017/11/20/taming-redux-with-sagas/
一篇关于 Redux-Saga 的良好概述,包括关于生成器函数的信息、saga 的用例、使用 saga 处理 promise 以及测试 saga。使用 RxJS 实现响应式 Redux 状态
https://ivanjov.com/reactive-redux-state-with-rxjs/
描述了“响应式编程”和 RxJS 库的概念,并展示了如何使用 redux-observable 来获取数据,以及测试示例。使用 redux-observable 在 Redux 中处理异步逻辑
https://medium.com/dailyjs/using-redux-observable-to-handle-asynchronous-logic-in-redux-d49194742522
一篇扩展文章,比较了基于 thunk 的实现方式和基于 observable 的实现方式来处理线绘制示例。
Redux 思维
更深入地了解 Redux 的使用方式,以及它为何如此运作。
- 何时(以及何时不)使用 Redux
https://changelog.com/posts/when-and-when-not-to-reach-for-redux
Redux 维护者 Mark Erikson 描述了 Redux 为解决的问题,以及它与其他常用工具的比较。
你可能不需要 Redux
https://medium.com/@dan_abramov/you-might-not-need-redux-be46360cf367
Dan Abramov 讨论了使用 Redux 所涉及的权衡。地道 Redux:Redux 之道,第一部分 - 实现和意图
https://blog.isquaredsoftware.com/2017/05/idiomatic-redux-tao-of-redux-part-1/
深入探讨 Redux 的实际工作原理、它要求您遵循的约束以及其设计和使用背后的意图。地道 Redux:Redux 之道,第二部分 - 实践和哲学
https://blog.isquaredsoftware.com/2017/05/idiomatic-redux-tao-of-redux-part-2/
后续探讨了常见 Redux 使用模式存在的原因、Redux 的其他使用方法,以及对这些不同模式和方法的优缺点的思考。Redux 有什么优点?
https://medium.freecodecamp.org/whats-so-great-about-redux-ac16f1cc0f8b
深入而迷人的分析了 Redux 与 OOP 和消息传递的比较,以及典型的 Redux 使用如何演变成类似 Java 的“setter”函数,并带有更多样板代码,以及对 Redux 之上更高层次的“blessed”抽象的呼吁,以使其更容易使用和学习对于新手来说。非常值得一读。
Redux 架构
构建大型 Redux 应用程序的模式和实践
构建应用程序状态时避免意外复杂性
https://hackernoon.com/avoiding-accidental-complexity-when-structuring-your-app-state-6e6d22ad5e2a
一套组织 Redux 存储结构的优秀指南。Redux 步步为营:适用于真实应用程序的简单而强大的工作流程
https://hackernoon.com/redux-step-by-step-a-simple-and-robust-workflow-for-real-life-apps-1fdf7df46092
“意外复杂性”文章的后续文章,讨论了原则关于 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
一个优秀的幻灯片,包含各种技巧和建议,包括保持操作创建者简单,在 reducer 中进行数据操作,抽象出 API 调用,避免传播道具等等。Redux 用于大型 Web 应用程序中的状态管理
https://blog.mapbox.com/redux-for-state-management-in-large-web-apps-c7f3fab3ce9b
关于地道 Redux 架构的优秀讨论和示例,以及 Mapbox 如何将这些方法应用于他们的 Mapbox Studio 应用程序。
应用程序和示例
React-Redux 实战示例:面向现实世界的 TodoMVC
https://github.com/GoThinkster/redux-review
一个使用 Redux 构建的完整堆栈“现实世界”应用程序示例。演示了一个类似 Medium 的社交博客网站,包括 JWT 身份验证、CRUD、点赞文章、关注用户、路由等等。RealWorld 项目还包括许多其他网站前端和后端的实现,特别旨在展示同一项目和 API 规范的不同服务器和客户端实现如何相互比较。项目 Mini-Mek
https://github.com/markerikson/project-minimek
一个示例应用程序,用于演示各种有用的 Redux 技术,与 https://blog.isquaredsoftware.com/series/practical-redux 上的“实用 Redux”博客系列相辅相成。react-redux-yelp-clone
https://github.com/mohamed-ismat/react-redux-yelp-clone
FullStackReact 的“Yelp Clone”应用程序的改编版本。它通过使用 Redux 和 Redux Saga 而不是本地状态来扩展原始版本,以及 React Router v4、styled-components 和其他现代标准。基于 React-Boilerplate 启动工具包。WordPress-Calypso
https://github.com/Automattic/wp-calypso
新的基于 JavaScript 和 API 的 WordPress.comSound-Redux
https://github.com/andrewngu/sound-redux
一个使用 React / Redux 构建的 Soundcloud 客户端Webamp
https://webamp.org
https://github.com/captbaritone/webamp
一个使用 React 和 Redux 构建的 Winamp2 浏览器内重制版本。实际上可以播放 MP3,并允许你加载本地 MP3 文件。Tello
https://github.com/joshwcomeau/Tello
一种简单而令人愉快的跟踪和管理电视节目的方式io-808
https://github.com/vincentriemer/io-808
尝试完全重制基于 Web 的 TR-808 架子鼓机
Redux 文档翻译
- 中文文档 — 中文
- 繁體中文文件 — 繁体中文
- Redux in Russian — 俄语
- Redux en Español - 西班牙语
- Redux in Korean - 韩语
书籍
Redux 实战
https://www.manning.com/books/redux-in-action
一本涵盖使用 Redux 的许多关键方面的综合书籍,包括 reducer 和 action 的基础知识以及与 React 的使用、复杂的中间件和副作用、应用程序结构、性能、测试等等。在解释使用 Redux 的许多方法的优缺点方面做得很好。由 Redux 联合维护者 Mark Erikson 个人推荐。Redux 全书
https://leanpub.com/redux-book
如何管理生产环境中的大型状态?为什么需要商店增强器?处理表单验证的最佳方法是什么?使用简单的术语和示例代码,获取所有这些问题的答案以及更多内容。学习使用 Redux 构建复杂且可用于生产环境的 Web 应用程序所需的一切。(注意:现在永久免费!)驯服 React 中的状态
https://www.robinwieruch.de/learn-react-redux-mobx-state-management/
如果您已经学习了作者之前名为“通往 React 之路”的书籍中的 React,那么“驯服 React 中的状态”将是学习 React 中基本和高级状态管理的完美结合。您将从仅学习 Redux 而没有 React 开始。之后,这本书将向您展示如何将 Redux 连接到您的 React 应用程序。高级章节将教您关于规范化、命名、选择器和异步操作。最后,您将使用 React 和 Redux 设置并构建一个真实世界的应用程序。
课程
Stephen Grider 的现代 React 与 Redux(付费)
https://www.udemy.com/react-redux/
通过本教程掌握 React 和 Redux 的基础知识,您将使用 React Router、Webpack 和 ES2015 开发应用程序。本课程将帮助您快速入门,并教您深入理解和构建 React 组件以及使用 Redux 结构应用程序的核心知识。Tyler McGinnis 的 Redux(付费)
https://tylermcginnis.com/courses/redux/
学习 Redux 时,您需要在足够大的应用程序上下文中学习它,以了解其优势。这就是为什么本课程如此庞大的原因。一个更好的名字可能是“真实世界的 Redux”。如果您厌倦了“待办事项清单”Redux 教程,那么您来对地方了。在本课程中,我们将讨论 Redux 在管理应用程序状态方面有何特殊之处。我们将构建一个实际的“真实世界”应用程序,以便您可以了解 Redux 如何处理乐观更新和错误处理等边缘情况。我们还将涵盖许多其他与 Redux、Firebase 和 CSS 模块配合良好的技术。Wes Bos 的学习 Redux(免费)
https://learnredux.com/
一个视频课程,逐步介绍构建“Reduxstagram”——一个简单的照片应用程序,它将简化 Redux、React Router 和 React.js 背后的核心思想。
更多资源
- React-Redux 链接 是一个精选的 React、Redux、ES2015 等相关内容的高质量文章、教程和相关内容列表。
- Redux 生态系统链接 是一个分类的 Redux 相关库、插件和工具集合。
- Awesome Redux 是一个广泛的 Redux 相关仓库列表。
- DEV 社区 是一个分享 Redux 项目、文章和教程,以及开始讨论和寻求有关 Redux 相关主题的反馈的地方。欢迎所有技能水平的开发者参与。