Redux Toolkit

GitHub 工作流状态

官方的、有主见的、包含所有必要功能的高效 Redux 开发工具集

安装

创建 React Redux 应用

使用 React 和 Redux Toolkit 开始新应用的推荐方式是使用我们官方的 Redux Toolkit + TS 的 Vite 模板，或者使用 Next.js 的 with-redux 模板创建新的 Next.js 项目。

这两种方式都已经为相应的构建工具正确配置了 Redux Toolkit 和 React-Redux，并附带一个小型示例应用，演示了如何使用 Redux Toolkit 的几个特性。

# 使用我们的 Redux+TS 模板的 Vite
# (使用 `degit` 工具克隆并提取模板)
npx degit reduxjs/redux-templates/packages/vite-template-redux my-app

# 使用 `with-redux` 模板的 Next.js
npx create-next-app --example with-redux my-app

我们目前没有官方的 React Native 模板，但推荐以下模板用于标准 React Native 和 Expo：

现有应用

Redux Toolkit 可以作为 NPM 包在模块打包器或 Node 应用中使用：

# NPM
npm install @reduxjs/toolkit

# Yarn
yarn add @reduxjs/toolkit

该包包含一个预编译的 ESM 构建，可以直接在浏览器中作为 <script type="module"> 标签使用。

文档

Redux Toolkit 的文档可在 https://redux-toolkit.js.org 获取，包括 API 参考和 Redux Toolkit 所有 API 的使用指南。

Redux 核心文档 https://redux.js.org 包含完整的 Redux 教程，以及一般 Redux 模式的使用指南。

目的

Redux Toolkit 包旨在成为编写 Redux 逻辑的标准方式。它最初的创建是为了解决关于 Redux 的三个常见问题：

"配置 Redux store 太复杂"
"我需要添加很多包才能让 Redux 做一些有用的事情"
"Redux 需要太多样板代码"

我们无法解决每个用例，但本着 create-react-app 的精神，我们可以尝试提供一些工具，抽象设置过程并处理最常见的用例，同时包含一些有用的实用工具，让用户可以简化他们的应用代码。

因此，这个包的范围是有意限制的。它不涉及"可重用的封装 Redux 模块"、文件夹或文件结构、管理 store 中的实体关系等概念。

Redux Toolkit 还包括一个强大的数据获取和缓存功能，我们称之为"RTK Query"。它作为一组单独的入口点包含在包中。它是可选的，但可以消除自己手写数据获取逻辑的需求。

包含内容

Redux Toolkit 包括以下 API：

configureStore()：包装 createStore 以提供简化的配置选项和良好的默认值。它可以自动组合你的 slice reducer，添加你提供的任何 Redux 中间件，默认包含 redux-thunk，并启用 Redux DevTools Extension 的使用。
createReducer()：让你提供一个 action 类型到 case reducer 函数的查找表，而不是编写 switch 语句。此外，它自动使用 immer 库，让你可以使用普通的可变代码编写更简单的不可变更新，如 state.todos[3].completed = true。
createAction()：为给定的 action 类型字符串生成一个 action creator 函数。该函数本身定义了 toString()，因此可以用来替代类型常量。
createSlice()：结合了 createReducer() + createAction()。接受一个 reducer 函数对象、slice 名称和初始状态值，并自动生成相应的 action creator 和 action 类型的 slice reducer。
combineSlices()：将多个 slice 组合成一个单一的 reducer，并允许在初始化后"懒加载"slice。
createListenerMiddleware()：让你定义包含额外逻辑的"效果"回调的"监听器"条目，以及基于派发的 action 或状态变化指定该回调何时运行的方式。这是 Redux 异步中间件（如 sagas 和 observables）的轻量级替代方案。
createAsyncThunk()：接受一个 action 类型字符串和一个返回 promise 的函数，并生成一个基于该 promise 派发 pending/resolved/rejected action 类型的 thunk。
createEntityAdapter()：生成一组可重用的 reducer 和选择器，用于管理 store 中的规范化数据。
从 Reselect 库重新导出的 createSelector() 实用函数，以便使用。

详情请参阅文档中的 Redux Toolkit API 参考部分。

RTK Query

RTK Query 作为 @reduxjs/toolkit 包中的可选附加组件提供。它专门用于解决数据获取和缓存的用例，提供了一个紧凑但功能强大的工具集，用于为你的应用定义 API 接口层。它旨在简化 Web 应用中加载数据的常见情况，消除了自己手写数据获取和缓存逻辑的需求。

RTK Query 基于 Redux Toolkit 核心构建，在其实现中使用 Redux。虽然使用 RTK Query 不需要了解 Redux 和 RTK，但你应该探索它们提供的所有额外的全局 store 管理功能，并安装 Redux DevTools 浏览器扩展，它与 RTK Query 完美配合，可以遍历和重放请求和缓存行为的时间线。

RTK Query 包含在核心 Redux Toolkit 包的安装中。它可以通过以下两个入口点之一使用：

import { createApi } from '@reduxjs/toolkit/query'

/* React 特定的入口点，自动生成
   与定义的端点对应的 hooks */
import { createApi } from '@reduxjs/toolkit/query/react'

包含内容

RTK Query 包括以下 API：

createApi()：RTK Query 功能的核心。它允许你定义一组端点，描述如何从一系列端点检索数据，包括如何获取和转换数据的配置。在大多数情况下，你应该在每个应用中使用一次，以"每个基本 URL 一个 API slice"为经验法则。
fetchBaseQuery()：fetch 的小型包装器，旨在简化请求。作为大多数用户在 createApi 中使用的推荐 baseQuery。
<ApiProvider />：如果你还没有 Redux store，可以用作 Provider。
setupListeners()：用于启用 refetchOnMount 和 refetchOnReconnect 行为的实用工具。

有关 RTK Query 是什么、它解决了哪些问题以及如何使用它的更多详细信息，请参阅 RTK Query 概述 页面。