跳至主要内容

什么是 Redux Toolkit？​

Redux Toolkit 是我们官方的、有见地的、包含电池的工具集，用于高效的 Redux 开发。它旨在成为编写 Redux 逻辑的标准方式，我们强烈建议您使用它。

它包含几个实用程序函数，简化了最常见的 Redux 用例，包括商店设置、定义 reducer、不可变更新逻辑，甚至一次创建整个“状态切片”，而无需手动编写任何 action creator 或 action type。它还包含最广泛使用的 Redux 附加组件，例如用于异步逻辑的 Redux Thunk 和用于编写选择器函数的 Reselect，以便您可以立即使用它们。

安装​

Redux Toolkit 作为 NPM 上的包提供，可用于模块捆绑器或 Node 应用程序

# NPM
npm install @reduxjs/toolkit

# Yarn
yarn add @reduxjs/toolkit

目的​

Redux 核心库有意保持中立。它允许你决定如何处理所有事情，例如商店设置、状态内容以及如何构建 reducer。

在某些情况下，这很好，因为它提供了灵活性，但这种灵活性并不总是必要的。有时我们只需要最简单的方法来开始，并获得一些开箱即用的良好默认行为。或者，也许你正在编写一个更大的应用程序，发现自己编写了一些类似的代码，并且希望减少手动编写这些代码的数量。

Redux Toolkit 最初是为了解决有关 Redux 的三个常见问题而创建的

  • "配置 Redux 商店太复杂了"
  • "我必须添加很多包才能让 Redux 做任何有用的事情"
  • "Redux 需要太多样板代码"

我们无法解决所有用例，但本着 create-react-app 和 apollo-boost 的精神，我们可以提供一套官方推荐的工具，这些工具可以处理最常见的用例，并减少做出额外决定的需要。

为什么你应该使用 Redux Toolkit​

Redux Toolkit 通过将我们的推荐最佳实践融入其中、提供良好的默认行为、捕获错误并允许你编写更简单的代码，使编写良好的 Redux 应用程序变得更容易，并加快开发速度。Redux Toolkit 对所有 Redux 用户都有益，无论其技能水平或经验如何。它可以在新项目的开始添加，也可以用作现有项目中增量迁移的一部分。

请注意，你并不需要使用 Redux Toolkit 来使用 Redux。有许多现有的应用程序使用其他 Redux 包装库，或者手动编写所有 Redux 逻辑，如果你仍然更喜欢使用其他方法，那就继续吧！

但是，我们强烈建议对所有 Redux 应用程序使用 Redux Toolkit.

总的来说，无论你是刚接触 Redux 的用户，正在设置你的第一个项目，还是经验丰富的用户，想要简化现有应用程序，使用 Redux Toolkit 将使你的代码更好，更易于维护。

包含的内容​

Redux Toolkit 包含

  • configureStore(): 封装了 createStore，提供简化的配置选项和良好的默认值。它可以自动组合你的切片 reducer，添加你提供的任何 Redux 中间件，默认包含 redux-thunk，并启用 Redux DevTools Extension 的使用。
  • createReducer(): 允许你提供一个动作类型到 case reducer 函数的查找表，而不是编写 switch 语句。此外，它自动使用 immer 库，让你可以使用正常的可变代码编写更简单的不可变更新，例如 state.todos[3].completed = true。
  • createAction(): 为给定的动作类型字符串生成一个动作创建器函数。该函数本身定义了 toString()，因此它可以代替类型常量使用。
  • createSlice(): 接受 reducer 函数对象、切片名称和初始状态值，并自动生成具有相应动作创建器和动作类型的切片 reducer。
  • createAsyncThunk: 接受动作类型字符串和返回 Promise 的函数，并生成一个 thunk，根据该 Promise 分派 pending/fulfilled/rejected 动作类型。
  • createEntityAdapter: 生成一组可重用的 reducer 和 selector，用于管理存储中的规范化数据。
  • 来自 Reselect 库的 createSelector 工具，为了方便使用而重新导出。

Redux Toolkit 还提供了 RTK Query 数据获取 API。RTK Query 是一个专门为 Redux 打造的强大数据获取和缓存工具。它旨在简化 Web 应用程序中加载数据的常见情况，无需您手动编写数据获取和缓存逻辑。

文档​

完整的 Redux Toolkit 文档可在 https://toolkit.redux.js.cn 上找到。