本页面由 PageTurner AI 翻译(测试版)。未经项目官方认可。 发现错误? 报告问题 →
学习资源
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 主题包括 store、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 Toolkit 和 React-Redux(含推荐的 TS hooks 配置),并展示即将推出的 RTK Query 数据获取 API 及其在 UI 中的应用。 -
Redux 教程:概述与实践
https://www.taniarascia.com/redux-react-guide/
Tania Rascia 编写的优质教程,快速解析 Redux 核心概念,并演示如何用原生 Redux 和 Redux Toolkit 构建基础应用。 -
Redux 初学者指南 - 轻松理解 Redux
https://www.freecodecamp.org/news/redux-for-beginners-the-brain-friendly-guide-to-redux/
易跟进的教程,使用 Redux Toolkit 和 React-Redux 构建待办应用(含数据获取功能)。 -
Redux 简易指南:Redux Toolkit 与 TypeScript
https://www.mattbutton.com/redux-made-easy-with-redux-toolkit-and-typescript/
实用教程,展示如何结合 Redux Toolkit 和 TypeScript 开发 Redux 应用,以及 RTK 如何简化典型 Redux 工作流。 -
Redux:从推特热潮到生产实践
https://slides.com/jenyaterpil/redux-from-twitter-hype-to-production#/
制作精良的幻灯片,可视化呈现 Redux 核心概念、React 集成方案、项目组织架构,以及 thunks/sagas 副作用处理。包含展示 React+Redux 数据流的动态示意图。
React 与 Redux 结合使用
React-Redux 绑定库解析
-
使用 React-Redux Hooks 现代化遗留 Redux 应用
https://app.egghead.io/playlists/modernizing-a-legacy-redux-application-with-react-hooks-c528
视频系列教程,对比早期connectAPI 与新版 React-Redux hooks API 的差异,并演示如何在组件中使用这些 hooks。 -
为何 Redux 在 React 应用中不可或缺
https://www.fullstackreact.com/articles/redux-with-mark-erikson/
解析在 React 中使用 Redux 的优势,包括组件间数据共享和热模块替换功能。
项目实战教程
通过构建项目教授 Redux 概念的教程,包括大型"真实世界"应用
- Practical Redux(实战 Redux)
https://blog.isquaredsoftware.com/2016/10/practical-redux-part-0-introduction/
https://blog.isquaredsoftware.com/series/practical-redux/
系列文章通过构建示例应用(基于管理 Battletech 战役的 MekHQ 应用)演示多种 Redux 技术。由 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 的第二套视频教程,紧接第一套内容。涵盖 store 初始状态、Redux 与 React Router 配合、选择器函数、状态规范化、Redux 中间件使用、异步 action 创建者等主题。链接的 Github 仓库包含视频笔记和文字稿。 -
React 现场编程:热重载和时间旅行
https://youtube.com/watch?v=xsSnOQynTHs
Dan Abramov 介绍 Redux 的原始会议演讲。了解 Redux 强制实施的约束如何简化带时间旅行的热重载 -
动手实现 Redux
https://zapier.com/engineering/how-to-build-redux/
深入讲解"构建迷你 Redux"的优质文章,不仅涵盖核心实现,还包括connect和中间件。 -
Connect.js 原理解析
https://gist.github.com/gaearon/1d19088790e70ac32ea636c025ba424e
简化版 React Reduxconnect()函数实现,展示其基本工作原理 -
动手编写 Redux!
https://www.jamasoftware.com/blog/lets-write-redux/
通过逐步编写迷你版 Redux 来解析概念和实现。
Reducer
探讨编写 reducer 函数方法的文章
-
充分利用
combineReducers
https://randycoulman.com/blog/2016/11/22/taking-advantage-of-combinereducers/
展示多次使用combineReducers构建状态树的示例,以及对不同 reducer 逻辑方案的权衡思考。 -
高阶 Reducers 的强大威力
https://slides.com/omnidan/hor#/
redux-undo 等库作者的幻灯片,阐释高阶 reducers 概念及其应用场景 -
使用高阶 Reducers 实现组合
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
深入解析为何及如何使用选择器函数从 store 获取数据,并从 store 值派生出附加数据。 -
使用 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 store 以获得最佳性能
-
Redux Store 数据查询实践
https://medium.com/@adamrackis/querying-a-redux-store-37db8c7f3b0f
探讨 Redux 中组织和存储数据的最佳实践,包括数据规范化和选择器函数的使用。 -
规范化 Redux Store 实现最大代码复用
https://medium.com/@adamrackis/normalizing-redux-stores-for-maximum-code-reuse-ae6e3844ae95
解析规范化 Redux store 如何赋能高效数据处理,并通过选择器函数反规范化层级数据的实例演示。 -
高级 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 Action 分发
https://stackoverflow.com/questions/35411423/how-to-dispatch-a-redux-action-with-a-timeout/35415559#35415559
Dan Abramov 循序渐进讲解 Redux 异步处理方案(内联异步调用、异步 Action 创建器、thunk 中间件) -
Stack Overflow: Redux 异步流为何需要中间件?
https://stackoverflow.com/questions/34570758/why-do-we-need-middleware-for-async-flow-in-redux/34599594#34599594
Dan Abramov 阐述使用 thunks 和异步中间件的原因,并提供实用模式 -
什么是 "thunk"?
https://daveceddia.com/what-is-a-thunk/
简明解释通用术语 "thunk" 及其在 Redux 中的特殊含义 -
Redux 中的 Thunks:基础概念
https://medium.com/fullstack-academy/thunks-in-redux-the-basics-85e538a3fe60
深入剖析 thunks 的原理、解决的问题及使用方法
副作用处理 - 进阶篇
管理异步行为的高级工具与技术
-
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
使用 thunks/sagas/observables/promise 中间件实现数据获取的横向对比 -
地道 Redux:对 Thunks、Sagas、抽象与可复用的思考
https://blog.isquaredsoftware.com/2017/01/idiomatic-redux-thoughts-on-thunks-sagas-abstraction-and-reusability/
回应 "thunks 缺陷论",论证 thunks/sagas 仍是处理复杂同步逻辑和异步副作用的有效方案 -
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 生成器控制流、Sagas 组合并发模式及实战用例 -
探索 Redux Sagas
https://medium.com/onfido-tech/exploring-redux-sagas-cc1fca2015ee
精辟论述如何通过 Sagas 在 Redux 应用中实现解耦的业务逻辑层 -
Taming Redux with Sagas
https://objectpartners.com/2017/11/20/taming-redux-with-sagas/
关于 Redux-Saga 的优质概述,包含生成器函数、saga 的用例、使用 saga 处理 Promise 以及测试 saga 等内容。 -
Reactive Redux State with RxJS
https://ivanjov.com/reactive-redux-state-with-rxjs/
介绍"响应式编程"概念和 RxJS 库,展示如何结合 redux-observable 获取数据并附带测试示例。 -
Using redux-observable to handle asynchronous logic in Redux
https://medium.com/dailyjs/using-redux-observable-to-handle-asynchronous-logic-in-redux-d49194742522
长篇技术文章,通过画线功能示例对比基于 thunk 和基于 observable 的两种异步实现方案。
深入理解 Redux
深度探讨 Redux 设计理念及其工作原理
- When (and when not) to reach for Redux
https://changelog.com/posts/when-and-when-not-to-reach-for-redux
Redux 维护者 Mark Erikson 解析 Redux 解决的问题域,并与其他常用工具进行对比。
-
You Might Not Need Redux
https://medium.com/@dan_abramov/you-might-not-need-redux-be46360cf367
Dan Abramov 探讨使用 Redux 的权衡取舍。 -
Idiomatic Redux: The Tao of Redux, Part 1 - Implementation and Intent
https://blog.isquaredsoftware.com/2017/05/idiomatic-redux-tao-of-redux-part-1/
深度剖析 Redux 工作原理、设计约束条件及其架构意图。 -
Idiomatic Redux: The Tao of Redux, Part 2 - Practice and Philosophy
https://blog.isquaredsoftware.com/2017/05/idiomatic-redux-tao-of-redux-part-2/
续篇探讨常见 Redux 模式成因、替代实现方案,以及不同模式的优缺点分析。 -
What's So Great About Redux?
https://medium.freecodecamp.org/whats-so-great-about-redux-ac16f1cc0f8b
深度解析 Redux 与 OOP/消息传递的对比,揭示典型 Redux 实现如何退化为 Java 式"setter"函数,呼吁建立高层抽象以降低学习曲线。极具洞见,强烈推荐阅读。
Redux 架构设计
大型 Redux 应用的结构模式与最佳实践
-
Avoiding Accidental Complexity When Structuring Your App State
https://hackernoon.com/avoiding-accidental-complexity-when-structuring-your-app-state-6e6d22ad5e2a
提供卓越的 Redux store 结构设计准则。 -
Redux Step by Step: A Simple and Robust Workflow for Real Life Apps
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
优秀的幻灯片演示,包含丰富技巧与建议:保持 action 创建器简洁、在 reducers 中处理数据操作、抽象 API 调用、避免 props 展开等。 -
Redux 在大型 Web 应用中的状态管理实践
https://blog.mapbox.com/redux-for-state-management-in-large-web-apps-c7f3fab3ce9b
关于地道 Redux 架构的精彩讨论与示例,展示 Mapbox 如何在其 Mapbox Studio 应用中实施这些方案。
应用与示例
-
React-Redux RealWorld 示例:真实场景的 TodoMVC
https://github.com/GoThinkster/redux-review
使用 Redux 构建的全栈"真实世界"应用示例,实现类 Medium 的社交博客平台,包含 JWT 认证、CRUD 操作、文章收藏、用户关注、路由等功能。RealWorld 项目还包含该站点的多种前后端实现,专门用于比较相同项目规范下不同技术栈的实现差异。 -
Project Mini-Mek
https://github.com/markerikson/project-minimek
演示实用 Redux 技术的示例应用,配套博客系列"Practical Redux":https://blog.isquaredsoftware.com/series/practical-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.com -
Sound-Redux
https://github.com/andrewngu/sound-redux
使用 React/Redux 构建的 Soundcloud 客户端 -
Webamp
https://webamp.org
https://github.com/captbaritone/webamp
基于 React 和 Redux 的浏览器版 Winamp2 复刻,支持 MP3 播放及本地文件加载。 -
Tello
https://github.com/joshwcomeau/Tello
追踪管理电视节目的简洁优雅方案 -
io-808
https://github.com/vincentriemer/io-808
基于 Web 的 TR-808 鼓机完全复刻尝试
Redux 文档翻译
-
中文文档 — 简体中文
-
繁體中文文件 — 繁體中文
-
俄语版 Redux — 俄语
-
西班牙语版 Redux - 西班牙语
-
韩语版 Redux - 韩语
书籍
-
Redux in Action
https://www.manning.com/books/redux-in-action
一本全面介绍使用 Redux 的书籍,涵盖了许多关键方面,包括 reducer 和 action 的基础知识、与 React 的集成、复杂的中间件和副作用处理、应用结构设计、性能优化、测试等内容。书中深入浅出地讲解了不同 Redux 使用方法的优缺点和适用场景,由 Redux 联合维护者 Mark Erikson 亲自推荐。 -
The Complete Redux Book
https://leanpub.com/redux-book
如何在生产环境管理大型状态?为什么需要 store enhancers?处理表单验证的最佳方式是什么?通过简洁的术语和示例代码,本书将解答这些核心问题。系统学习使用 Redux 构建复杂生产级 Web 应用所需的一切知识。(注:现已永久免费!) -
Taming the State in React
https://www.robinwieruch.de/learn-react-redux-mobx-state-management/
如果你已通过作者前作《The Road to learn React》学习了 React 基础,本书将完美衔接,带你掌握 React 中基础和高级的状态管理技术。你将先学习独立于 React 的 Redux 核心概念,随后了解如何将 Redux 集成到 React 应用中。高级章节涵盖状态规范化、命名规范、选择器设计和异步操作处理,最后通过实战项目教你构建真实的 React+Redux 应用。
课程
-
Modern React with Redux, by Stephen Grider(付费)
https://www.udemy.com/react-redux/
通过 React Router、Webpack 和 ES2015 开发应用的实战教程,深度掌握 React 和 Redux 核心原理。本课程助你快速上手,深入理解 React 组件开发和使用 Redux 架构应用的必备知识。 -
Redux, by Tyler McGinnis(付费)
https://tylermcginnis.com/courses/redux/
学习 Redux 需要在足够复杂的应用中才能体会其价值——这正是本课程的特色。厌倦了"待办事项"式的教程?这里提供更贴切的名字:"真实世界 Redux"。我们将探讨 Redux 在状态管理中的独特优势,通过构建真实应用演示如何处理乐观更新、错误处理等边界场景,并涵盖与 Redux 协同的 Firebase、CSS Modules 等技术栈。 -
Learn Redux, by Wes Bos(免费)
https://learnredux.com/
通过构建"Reduxstagram"照片应用,视频课程直观演示 Redux、React Router 和 React.js 的核心概念,化繁为简掌握技术精髓。
更多资源
-
React-Redux 资源列表 - 精选的高质量 React、Redux、ES2015 相关文章与教程。
-
Redux 生态链接 - 分类整理的 Redux 相关库、插件和实用工具。
-
Awesome Redux - 全面的 Redux 相关资源仓库索引。
-
DEV 社区 - 分享 Redux 项目、文章教程,发起技术讨论与反馈的开放平台,欢迎所有开发者参与交流。