Redux Toolkit

相关源文件

• README.md
• docs/components/_FundamentalsWarning.mdx
• docs/introduction/CoreConcepts.md
• docs/introduction/Examples.md
• docs/introduction/GettingStarted.md
• docs/introduction/Installation.md
• docs/introduction/LearningResources.md
• docs/introduction/why-rtk-is-redux-today.md
• docs/style-guide/style-guide.md
• docs/tutorials/essentials/part-1-overview-concepts.md
• docs/tutorials/essentials/part-2-app-structure.md
• docs/tutorials/essentials/part-3-data-flow.md
• docs/tutorials/essentials/part-4-using-data.md
• docs/tutorials/essentials/part-5-async-logic.md
• docs/tutorials/essentials/part-6-performance-normalization.md
• docs/tutorials/essentials/part-7-rtk-query-basics.md
• docs/tutorials/essentials/part-8-rtk-query-advanced.md
• docs/tutorials/tutorials-index.md
• docs/tutorials/videos.md
• docs/understanding/history-and-design/PriorArt.md
• docs/understanding/history-and-design/history-of-redux.md
• docs/usage/deriving-data-selectors.md
• website/sidebars.js

Redux Toolkit 是编写 Redux 逻辑的官方推荐方法。它封装了 Redux 核心，并提供了一套旨在简化 Redux 开发、强制执行良好实践并提供更好开发体验的工具。本页面介绍了 Redux Toolkit 是什么、其核心功能以及它如何帮助解决常见的 Redux 开发挑战。

有关 Redux 核心概念的信息，请参阅Redux 概述。有关将 Redux 与 React 结合使用的具体细节，请参阅Redux 与 React。

目的和益处

Redux Toolkit 的创建是为了解决关于 Redux 的三个常见问题

1. “配置 Redux store 太复杂了”
2. “我必须添加很多包才能让 Redux 做任何有用的事情”
3. “Redux 需要太多的样板代码”

它作为 Redux 核心库之上的抽象层，简化了常见的 Redux 任务，简化了开发过程，并帮助开发人员避免常见错误。

来源: [README.md:1-146], [docs/introduction/why-rtk-is-redux-today.md:8-77]

核心功能

Redux Toolkit 包含几个重要的包和实用工具，可以简化 Redux 开发

1. configureStore

Redux createStore 的封装，提供简化的配置和良好的默认值

• 自动组合 slice reducers
• 添加您提供的中间件（默认包括 redux-thunk）
• 启用 Redux DevTools 扩展
• 设置开发检查，例如不可变性验证

来源: [docs/tutorials/essentials/part-2-app-structure.md:131-171], [docs/introduction/why-rtk-is-redux-today.md:57-69]

2. createSlice

创建 Redux 状态逻辑的 slice，包括 actions 和 reducers

• 根据 reducer 名称自动生成 action creator
• 内部使用 Immer，允许在 reducers 中进行“可变”逻辑
• 消除了对 action type 常量的需求
• 大大减少了样板代码

来源: [docs/tutorials/essentials/part-2-app-structure.md:236-296], [docs/introduction/why-rtk-is-redux-today.md:78-110]

3. createAsyncThunk

用于处理 Redux 中异步逻辑的函数

• 创建标准化的异步 action creator
• 自动分发“pending/fulfilled/rejected”actions
• 简化加载状态和错误的 Hhandling
• 与 TypeScript 良好集成

来源: [docs/tutorials/essentials/part-5-async-logic.md:89-147], [docs/tutorials/essentials/part-5-async-logic.md:401-440]

4. RTK Query

一个强大的数据获取和缓存工具，内置于 Redux Toolkit

• 处理数据获取、缓存和更新
• 自动生成 React hooks
• 提供缓存失效策略
• 减少手动编写数据获取逻辑的需要

来源: [docs/tutorials/essentials/part-7-rtk-query-basics.md:35-139], [docs/tutorials/essentials/part-8-rtk-query-advanced.md:23-60]

Redux Toolkit 对比传统 Redux

与传统 Redux 实现相比，Redux Toolkit 大幅减少了所需的代码量

功能	传统 Redux	Redux Toolkit
Store 设置	使用 createStore, combineReducers, applyMiddleware 进行手动配置	使用选项进行单次 configureStore 调用
Action 创建	显式的 action type 常量和 action creator 函数	由 createSlice 自动生成
不可变更新	复杂的 spread operators 和数组方法	在 reducers 中使用 Immer 进行直接“突变”
异步逻辑	自定义中间件设置，复杂的 thunks	使用标准化模式的 createAsyncThunk
数据获取	手动请求状态，复杂的 thunks	RTK Query 端点和自动生成的 hooks

来源: [docs/introduction/why-rtk-is-redux-today.md:33-110], [docs/tutorials/essentials/part-7-rtk-query-basics.md:60-139]

使用 Redux Toolkit 的典型数据流

下图说明了使用 Redux Toolkit 的 Redux 应用程序中的数据流

来源: [docs/tutorials/essentials/part-5-async-logic.md:81-87], [docs/tutorials/essentials/part-3-data-flow.md:83-254]

实现细节

Redux Toolkit 包结构

Redux Toolkit 的结构旨在为现代 Redux 开发提供所需的所有工具

来源: [docs/introduction/why-rtk-is-redux-today.md:32-110], [docs/tutorials/essentials/part-7-rtk-query-basics.md:101-129]

使用 TypeScript 进行 Redux 类型化

Redux Toolkit 提供出色的 TypeScript 支持。常见模式包括

来源: [docs/tutorials/essentials/part-3-data-flow.md:207-250], [docs/tutorials/essentials/part-5-async-logic.md:225-289]

最佳实践

推荐的 Redux Toolkit 模式

1. 对所有 Redux 状态使用 createSlice

   • 每个不同的“领域”或功能区一个 slice
   • 将相关数据和逻辑放在一起

2. 使用 createEntityAdapter 规范化复杂数据

   • 以优化的结构按 ID 存储实体
   • 自动 CRUD 操作 reducers

3. 对所有异步操作使用 createAsyncThunk

   • 所有 API 请求的标准化模式
   • 一致的加载状态管理

4. 尽可能使用 RTK Query 实现数据获取

   • 开箱即用的缓存管理
   • 自动加载/错误状态
   • 优化的渲染性能

5. 在整个应用程序中使用类型化的 Hooks

   • 定义 useSelector 和 useDispatch 的类型化版本
   • 更好的类型安全和编辑器自动补全

来源: [docs/style-guide/style-guide.md:86-110], [docs/tutorials/essentials/part-7-rtk-query-basics.md:139-162]

Bundle Size 考量

Redux Toolkit 会给您的应用程序的 bundle size 增加一个固定的、一次性的量

场景	大致大小（min+gzip）
已使用 RTK	RTK Query 约 9kb，hooks 约 2kb
未使用 RTK（不带 React）	RTK+依赖+RTK Query 17kb
未使用 RTK（带 React）	19kb + React-Redux（对等依赖）

RTK Query 中包含的功能通过消除手动编写的数据获取逻辑，很快就能弥补所增加的 bundle size。

来源: [docs/tutorials/essentials/part-7-rtk-query-basics.md:122-133]

结论

Redux Toolkit 已成为编写 Redux 应用程序的标准方式。与纯 Redux 相比，它显著减少了样板代码，强制执行最佳实践，并提供了更好的开发体验。对于新的 Redux 项目，强烈建议从一开始就使用 Redux Toolkit，现有 Redux 应用程序可以逐步迁移以利用其功能。