Redux Toolkit使用指南：概述、示例

最新推荐文章于 2025-06-06 23:25:23 发布

原创

最新推荐文章于 2025-06-06 23:25:23 发布 · 1.6k 阅读

13 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #javascript #redux

通过 React、Angular、Vue 或 React Native 应用生成的用户界面是其状态的函数。对于许多前端开发者来说，Redux Toolkit 是完成任务的理想工具。

Redux Toolkit 是 Redux 生态系统的一部分。多年来，Redux 一直是管理复杂应用程序状态的首选解决方案，但 Redux Toolkit 填补了 Redux 与易用性之间的鸿沟。大约一年多以来，Redux Toolkit 一直是在你的应用程序中使用 Redux 的官方推荐方法。

在这个采用指南中，我们将探讨 Redux Toolkit 及其功能、优缺点。我们还将讨论其使用案例和替代方案，以帮助你更好地评估是否在你的下一个项目中利用这个工具。

Redux Toolkit 是什么？

Redux Toolkit（RTK）是高效 Redux 开发的官方、有主张的工具集。

在 RTK 之前，开发者必须手动编写 Redux 存储，使用大量样板代码。这包括设置减速器、操作、选择器、操作和中间件，只是为了运行一个基本的存储。RTK 通过提供一组实用函数来简化你使用 Redux 的标准方式，处理了这些痛苦的任务。

Redux 团队知道开发者在 Redux 的复杂性方面存在问题。因此，他们着手创建一个解决方案，以简化 Redux 工作流程，并使状态管理对开发者和 React Toolkit 更简单。

最初于 2019 年发布，Redux Toolkit 旨在封装最佳实践、常见模式和有用工具，以改进 Redux 开发体验。

Redux Toolkit 如何工作？

Redux Toolkit 是我们所熟知的 Redux 原则的一个封装器。它提供了简化开发者常常讨厌的任务的实用工具。以下是一个快速的概述：

简化存储设置：RTK 的 configureStore 函数简化了使用预构建配置和中间件创建 Redux 存储的过程。
自动减速器和操作创建：createSlice 函数允许你简单定义减速器和操作，而不需要所有旧的样板代码。
直观的状态更新：RTK 与 Immer 库集成，这意味着你可以在不手动处理不可变性的情况下写入状态。
中间件：RTK 配备了 Redux Thunk 用于异步操作和 Reselect 用于优化选择器函数。
强大的工具：React Toolkit 还配备了诸如 RTK Query 用于数据获取和缓存的实用工具。

Redux 团队最近发布了 Redux Toolkit 的 2.0 版本，增加了以下功能：

一个新的 combineSlices 方法，将惰性加载片减速器以更好地进行代码拆分。
在运行时添加中间件的能力。
减速器中的异步 thunk 支持。
将选择器作为切片的一部分。

为什么使用 Redux Toolkit？

让我们诚实一点：Redux 需要改变。它带来了过多的样板代码、复杂的设置，以及一个学习曲线，即使对于经验丰富的开发者在我们称之为前端开发的不断变化的领域中也可能陡峭。

Redux Toolkit 是 Redux 所需要的改变。它在正反对比中增加了更多“优点”。以下是使用 Redux Toolkit 的一些原因：

便利性：不再需要为减速器、操作、选择器和常量编写无休止的样板代码。或者通过搜索名称、常量，最终找到减速器中的问题 —— 然后再次通过代码回溯找到问题。RTK 的 createSlice 承担了所有繁重的工作，为你节省了时间和理智。
性能：Redux Toolkit 继承了 Redux 的单一真相源方法，并添加了诸如记忆选择器和 Immer 等工具，让你在不为每个更改创建新对象的开销下以不可变的方式修改状态。
易用性：RTK 使状态更新更加直观，并通过 Immer 减少了错误的风险。API 清晰，文档是你使用它所需要的全部内容，与纯 Redux 相比，学习曲线很平缓。在早期试图改进 Redux 的过程中，我看过许多类似于 RTK 的选项，尝试了一些，并放弃了。自从接触到 Redux Toolkit 以来，我已经使用了几年，完全是支持者！
社区和生态系统：只因为每个人似乎都在使用一个库，并不意味着你也应该这样做。然而，有一个大型社区支持着 RTK，这是一个运行良好的工具。如果你遇到问题或在实现 RTK 方面遇到困难，谷歌搜索通常会找到其他人不仅感受到你的痛苦，而且已经找到了你问题的解决方案。
文档：有些库在文档方面做得很好，因为它们有大量可用资源，但格式混乱且难以理解。我只想要一些真实的代码示例来展示我如何使用东西。然而，Redux Toolkit 的文档既全面又组织良好，包含大量示例。文档将引导你从入门到探索用例、参数、异常等更多内容，甚至是我还没有必要查看的内容。
集成：RTK 与其他工具（尤其是 React 和 TypeScript）兼容良好，并减少了创建手动类型定义的必要性，同时为你提供了类型安全性。

即便如此，Redux Toolkit 并不是一刀切的解决方案。以下是你可能重新考虑在你的应用程序中使用 RTK 的原因：

捆绑大小：与纯 Redux 相比，RTK 会给你的捆绑包增加一些负担。但让我们诚实一点，与现代应用程序的整体大小及其带来的好处相比，这只是一个小代价。
定制：虽然它消除了额外的开销，但 RTK 添加了一个抽象层。如果你需要对 Redux 所做的一切进行深度控制，纯 Redux 可能会给你更多的灵活性。但对于大多数应用程序，你不需要深入到这个程度。
复杂性：虽然 Redux Toolkit 比纯 Redux 更容易，但它仍然有一个学习曲线，但有许多资源和一个庞大的社区来支持你。起初可能会有挑战，但一旦你掌握了它，你会看到它的价值。
对简单应用程序过度：对于一些应用程序，你可能不需要 Redux、Redux Toolkit 或任何第三方状态管理库。

了解的关键 Redux Toolkit 功能

Redux Toolkit 提供了一些强大的功能，使得使用 Redux 进行状态管理比几年前容易得多。以下是一些你需要了解的重要功能，以开始使用 RTK。

配置 Redux 存储

你的 Redux 存储是应用程序状态的唯一数据源。过去，你会使用 createStore 创建这个存储。现在，推荐的方法是使用 configureStore，它不仅会为你创建存储，还会接受减速器函数。

下面是 configureStore 的基本示例：

import {
   
    configureStore } from '@reduxjs/toolkit';
import appReducer from 'store/reducers/appSlice';
import cartReducer from 'store/reducers/cartSlice';

const store = configureStore({
   
   
  reducer: {
   
   
    // 在这里添加你的减速器，或先合并为 rootReducer
    app: appReducer,
    cart: cartReducer
  },
  // 我们稍后再看如何添加中间件
  // middleware: (getDefaultMiddleware) => ...
});

// 使用这些类型进行简单的类型声明
export type AppDispatch = typeof store.dispatch;
export type RootState = ReturnType<typeof store.getState>;
export type AppThunk<ReturnType = void> = ThunkAction<ReturnType, RootState, unknown, Action<string>>;

// 在整个应用程序中使用它们，而不是简单地使用 `useDispatch` 和 `useSelector`
export const useAppDispatch = () => useDispatch<AppDispatch>();
export const