Skip to main content

什么是 Redux 工具包？​

¥What is Redux Toolkit?

Redux 工具包 是我们官方的、有态度的、包含适配器的工具集，用于高效的 Redux 开发。它旨在成为编写 Redux 逻辑的标准方法，我们强烈建议你使用它。

¥Redux Toolkit is our official, opinionated, batteries-included toolset for efficient Redux development. It is intended to be the standard way to write Redux logic, and we strongly recommend that you use it.

它包括几个简化最常见 Redux 用例的实用函数，包括存储设置、定义化简器、不可变更新逻辑，甚至一次创建整个 "切片" 状态，而无需手动编写任何操作创建者或操作类型。它还包括最广泛使用的 Redux 插件，例如用于异步逻辑的 Redux Thunk 和用于编写选择器函数的 Reselect，以便你可以立即使用它们。

¥It includes several utility functions that simplify the most common Redux use cases, including store setup, defining reducers, immutable update logic, and even creating entire "slices" of state at once without writing any action creators or action types by hand. It also includes the most widely used Redux addons, like Redux Thunk for async logic and Reselect for writing selector functions, so that you can use them right away.

安装​

¥Installation

Redux Toolkit 在 NPM 上作为包提供，可与模块打包器或 Node 应用一起使用：

¥Redux Toolkit is available as a package on NPM for use with a module bundler or in a Node application:

# NPM
npm install @reduxjs/toolkit

# Yarn
yarn add @reduxjs/toolkit

目的​

¥Purpose

Redux 核心库是故意不带任何意见的。它可以让你决定如何处理所有事情，例如存储设置、状态包含什么以及如何构建 reducer。

¥The Redux core library is deliberately unopinionated. It lets you decide how you want to handle everything, like store setup, what your state contains, and how you want to build your reducers.

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

¥This is good in some cases, because it gives you flexibility, but that flexibility isn't always needed. Sometimes we just want the simplest possible way to get started, with some good default behavior out of the box. Or, maybe you're writing a larger application and finding yourself writing some similar code, and you'd like to cut down on how much of that code you have to write by hand.

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

¥Redux Toolkit was originally created to help address three common concerns about Redux:

  • "配置 Redux 存储太复杂"

    ¥"Configuring a Redux store is too complicated"

  • "我必须添加很多包才能让 Redux 做任何有用的事情"

    ¥"I have to add a lot of packages to get Redux to do anything useful"

  • "Redux 需要太多样板代码"

    ¥"Redux requires too much boilerplate code"

我们无法解决每个用例，但本着 create-react-app 和 apollo-boost 的精神，我们可以提供官方推荐的工具集来处理最常见的用例并减少做出额外决策的需要。

¥We can't solve every use case, but in the spirit of create-react-app and apollo-boost, we can provide an official recommended set of tools that handle the most common use cases and reduce the need to make extra decisions.

为什么应该使用 Redux 工具包​

¥Why You Should Use Redux Toolkit

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

¥Redux Toolkit makes it easier to write good Redux applications and speeds up development, by baking in our recommended best practices, providing good default behaviors, catching mistakes, and allowing you to write simpler code. Redux Toolkit is beneficial to all Redux users regardless of skill level or experience. It can be added at the start of a new project, or used as part of an incremental migration in an existing project.

请注意，你不需要使用 Redux Toolkit 来使用 Redux。有许多现有应用使用其他 Redux 封装器库，或者编写所有 Redux 逻辑 "用手"，如果你仍然喜欢使用不同的方法，请继续！

¥Note that you are not required to use Redux Toolkit to use Redux. There are many existing applications that use other Redux wrapper libraries, or write all Redux logic "by hand", and if you still prefer to use a different approach, go ahead!

然而，我们强烈建议对所有 Redux 应用使用 Redux Toolkit.

¥However, we strongly recommend using Redux Toolkit for all Redux apps.

总的来说，无论你是设置第一个项目的全新 Redux 用户，还是想要简化现有应用的经验丰富的用户，使用 Redux Toolkit 都将使你的代码更好、更易于维护。

¥Overall, whether you're a brand new Redux user setting up your first project, or an experienced user who wants to simplify an existing application, using Redux Toolkit will make your code better and more maintainable.

包含什么​

¥What's Included

Redux 工具包包括：

¥Redux Toolkit includes:

  • configureStore()：封装 createStore 以提供简化的配置选项和良好的默认值。它可以自动组合你的切片 reducer，添加你提供的任何 Redux 中间件，默认包括 redux-thunk，并允许使用 Redux DevTools 扩展。

    ¥configureStore(): wraps createStore to provide simplified configuration options and good defaults. It can automatically combine your slice reducers, adds whatever Redux middleware you supply, includes redux-thunk by default, and enables use of the Redux DevTools Extension.

  • createReducer()：它允许你向 case 缩减器函数提供操作类型的查找表，而不是编写 switch 语句。此外，它会自动使用 immer 库 让你使用正常的可变代码编写更简单的不可变更新，例如 state.todos[3].completed = true。

    ¥createReducer(): that lets you supply a lookup table of action types to case reducer functions, rather than writing switch statements. In addition, it automatically uses the immer library to let you write simpler immutable updates with normal mutative code, like state.todos[3].completed = true.

  • createAction()：为给定的操作类型字符串生成一个操作创建器函数。函数本身定义了 toString()，因此可以使用它来代替类型常量。

    ¥createAction(): generates an action creator function for the given action type string. The function itself has toString() defined, so that it can be used in place of the type constant.

  • createSlice()：接受 reducer 函数的对象、切片名称和初始状态值，并自动生成具有相应动作创建者和动作类型的切片 reducer。

    ¥createSlice(): accepts an object of reducer functions, a slice name, and an initial state value, and automatically generates a slice reducer with corresponding action creators and action types.

  • createAsyncThunk：接受一个操作类型字符串和一个返回 Promise 的函数，并生成一个 thunk，根据该 Promise 分派 pending/fulfilled/rejected 个操作类型

    ¥createAsyncThunk: accepts an action type string and a function that returns a promise, and generates a thunk that dispatches pending/fulfilled/rejected action types based on that promise

  • createEntityAdapter：生成一组可重用的缩减器和选择器来管理存储中的规范化数据

    ¥createEntityAdapter: generates a set of reusable reducers and selectors to manage normalized data in the store

  • createSelector 实用程序 来自 重新选择 库，重新导出以便于使用。

    ¥The createSelector utility from the Reselect library, re-exported for ease of use.

Redux 工具包也有 RTK 查询数据获取 API。RTK Query 是专为 Redux 构建的强大的数据获取和缓存工具。它旨在简化在 Web 应用中加载数据的常见情况，无需你自己手动编写数据获取和缓存逻辑。

¥Redux Toolkit also has the RTK Query data fetching API. RTK Query is a powerful data fetching and caching tool built specifically for Redux. It is designed to simplify common cases for loading data in a web application, eliminating the need to hand-write data fetching & caching logic yourself.

文档​

¥Documentation

完整的 Redux Toolkit 文档可在 https://redux-toolkit.js.org 获取。

¥The complete Redux Toolkit documentation is available at https://redux-toolkit.js.org.