跳至主要内容

教程概述

Redux 核心文档网站 https://redux.js.cn 包含学习 Redux 的主要教程,包括如何将 Redux Toolkit 和 React-Redux 结合使用。

提示

为了避免在 Redux 核心和 Redux Toolkit 文档之间重复解释,我们专注于使 Redux 核心文档教程更全面,并指向它们,而不是在这里的 Redux Toolkit 文档中提供扩展教程。

查看这些链接的教程,了解如何有效地使用 Redux Toolkit。

Redux Toolkit 快速入门

Redux Toolkit 快速入门教程 中,简要介绍了如何在 React 应用程序中添加和使用 Redux Toolkit。

如果您只想以最快的速度运行基本示例,请阅读快速入门教程。

我们还有一个 TypeScript 快速入门教程,简要介绍了如何使用 Redux Toolkit 和 React-Redux 设置和使用 TypeScript。

如果您使用的是 Next.js,我们有一个专门针对使用 Redux Toolkit 与 Next.js 的教程 Next.js 教程

Redux Essentials:一个真实世界的例子

The Redux Essentials 教程 教你“如何正确使用 Redux”,使用 Redux Toolkit 作为编写 Redux 逻辑的标准方法。

它展示了如何构建一个“真实世界”风格的示例应用程序,并沿途教授 Redux 概念。

如果你以前从未使用过 Redux,并且只想了解“如何使用它来构建有用的东西?”,请从 Redux Essentials 教程开始。

Redux 基础知识:从头开始的 Redux

The Redux 基础知识教程 教授“Redux 如何工作,从底层向上”,通过展示如何手动编写 Redux 代码以及为什么存在标准用法模式。然后它展示了 Redux Toolkit 如何简化这些 Redux 用法模式。

由于 Redux Toolkit 是一个围绕 Redux 核心进行包装的抽象层,因此了解 RTK 的 API 实际上为你做了什么是有帮助的。如果你想了解 Redux 的真正工作原理以及为什么 RTK 是推荐的方法,请阅读 Redux 基础知识教程。

学习现代 Redux 直播

Redux 维护者 Mark Erikson 出现在“Learn with Jason”节目中,解释了我们今天推荐如何使用 Redux。该节目包括一个实时编码的示例应用程序,展示了如何使用 Redux Toolkit 和 React-Redux 钩子以及 Typescript,以及新的 RTK Query 数据获取 API。

查看 “学习现代 Redux”节目笔记页面,获取示例应用程序源代码的文字记录和链接。

使用 Redux Toolkit

RTK 使用指南 文档页面 解释了每个 RTK API 的标准用法模式。The API 参考 部分描述了每个 API 函数并提供了其他用法示例。

The Redux Essentials 教程 还展示了如何在构建应用程序时使用每个 API。

RTK Query 视频课程

如果您更喜欢视频课程,您可以在 Egghead 免费观看由 RTK Query 创建者 Lenz Weber-Tronic 制作的这门 RTK Query 视频课程,或直接查看第一课

将 Vanilla Redux 迁移到 Redux Toolkit

如果您已经了解 Redux,只想了解如何将现有应用程序迁移到 Redux Toolkit,那么Redux Fundamentals 教程中的“使用 Redux Toolkit 的现代 Redux”页面展示了 RTK 的 API 如何简化 Redux 使用模式以及如何处理迁移。

将 Redux Toolkit 与 TypeScript 一起使用

RTK 文档页面上的与 TypeScript 一起使用展示了使用 TypeScript 和 React 设置 Redux Toolkit 的基本模式,并记录了每个 RTK API 的特定 TS 模式。

此外,Create-React-App 的 Redux + TS 模板已经配置了 RTK 来使用这些 TS 模式,并作为如何实现此功能的良好示例。

旧版 Redux Toolkit 教程

我们之前在 Redux Toolkit 文档中直接提供了一套“基础/中级/高级”教程。它们很有帮助,但我们已经删除了它们,转而指向 Redux 核心文档中的“Essentials”和“Fundamentals”教程。

如果您想浏览旧教程,可以在我们的仓库历史记录中查看内容文件

Redux Toolkit 仓库:旧版“基础/中级/高级”教程文件