跳至主要内容

Redux Toolkit 入门

目的​

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

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

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

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

这些工具应该对所有 Redux 用户都有益。无论你是刚接触 Redux 的用户，正在设置你的第一个项目，还是经验丰富的用户，想要简化现有应用程序，Redux Toolkit 都可以帮助你改进 Redux 代码。

安装​

创建 React Redux 应用​

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

这两个模板已经为该构建工具适当地配置了 Redux Toolkit 和 React-Redux，并附带一个小示例应用，演示了如何使用 Redux Toolkit 的几个功能。

# Vite with our Redux+TS template
# (using the `degit` tool to clone and extract the template)
npx degit reduxjs/redux-templates/packages/vite-template-redux my-app

# Next.js using the `with-redux` template
npx create-next-app --example with-redux my-app

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

现有应用​

Redux Toolkit 可作为 NPM 上的包使用，用于与模块打包器或 Node 应用程序一起使用。

npm install @reduxjs/toolkit

如果您需要 React 绑定

npm install react-redux

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

包含的内容​

Redux Toolkit 包含以下 API

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

RTK Query​

RTK Query 作为 @reduxjs/toolkit 包中的可选附加组件提供。它是专门为解决数据获取和缓存用例而构建的，提供了一个紧凑但功能强大的工具集来定义应用程序的 API 接口层。它旨在简化 Web 应用程序中加载数据的常见情况，无需您手动编写数据获取和缓存逻辑。

RTK Query 在 Redux Toolkit 核心之上构建，使用 Redux 作为其内部架构。虽然使用 RTK Query 不需要了解 Redux 和 RTK，但您应该探索它们提供的其他所有全局存储管理功能，以及安装 Redux DevTools 浏览器扩展，它与 RTK Query 无缝协作，可以遍历和回放请求和缓存行为的时间线。

RTK Query 包含在 Redux Toolkit 核心包的安装中。它可以通过以下两个入口点中的任何一个获得。

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

/* React-specific entry point that automatically generates
   hooks corresponding to the defined endpoints */
import { createApi } from '@reduxjs/toolkit/query/react'

包含的内容​

RTK Query 包含以下 API

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

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

学习 Redux​

我们提供各种资源来帮助您学习 Redux。

Redux Essentials 教程​

Redux Essentials 教程 是一个“自上而下”的教程，使用我们最新的推荐 API 和最佳实践，教授“如何正确使用 Redux”。 我们建议从这里开始。

Redux 基础教程​

Redux 基础教程 是一个“自下而上”的教程，从第一原理开始，不使用任何抽象，教授“Redux 如何工作”，以及为什么存在标准的 Redux 使用模式。

学习现代 Redux 直播​

Redux 维护者 Mark Erikson 出现在“Learn with Jason”节目中，解释了我们今天如何推荐使用 Redux。 该节目包括一个实时编码的示例应用程序，展示了如何使用 Redux Toolkit 和 React-Redux hook 与 Typescript，以及新的 RTK Query 数据获取 API。

请查看 "学习现代 Redux" 的节目笔记页面 以获取文字记录和示例应用程序源代码的链接。

帮助与讨论​

#redux 频道 是 Reactiflux Discord 社区 的官方资源，用于解答所有与学习和使用 Redux 相关的问题。Reactiflux 是一个很棒的地方，可以在这里闲逛、提问和学习 - 快来加入我们吧！

您也可以在 Stack Overflow 上使用 #redux 标签 提问。

最后更新于