7.基础教程-RTK Query基础

你将学到

• RTK Query 如何简化 Redux 应用程序的数据获取
• 如何设置 RTK Query
• 如何使用 RTK Query 进行基本的数据获取和更新请求

概述

RTK Query 是一个强大的数据获取和缓存工具。它旨在简化在 Web 应用程序中加载数据的常见情况，无需自己手动编写数据获取和缓存逻辑。

RTK Query 是一个包含在 Redux Toolkit 包中的可选插件，其功能构建在 Redux Toolkit 中的其他 API 之上。

动机

在过去的几年里，React 社区已经意识到 “数据获取和缓存” 实际上是一组不同于 “状态管理” 的关注点。

RTK Query 从其他开创数据获取解决方案的工具中汲取灵感，例如 Apollo Client、React Query、Urql 和 SWR，但在其 API 设计中添加了独特的方法：

• 数据获取和缓存逻辑构建在 Redux Toolkit 的 createSlice 和 createAsyncThunk API 之上
• 由于 Redux Toolkit 与 UI 无关，因此 RTK Query 的功能可以与任何 UI 层一起使用
• API 请求接口是提前定义的，包括如何从参数生成查询参数和转换响应以进行缓存
• RTK Query 还可以生成封装整个数据获取过程的 React hooks ，为组件提供 data 和 isFetching 字段，并在组件挂载和卸载时管理缓存数据的生命周期
• RTK Query 提供“缓存数据项生命周期函数”选项，支持在获取初始数据后通过 websocket 消息流式传输缓存更新等用例
• 我们有从 OpenAPI 和 GraphQL 模式生成 API slice 代码的早期工作示例
• 最后，RTK Query 完全用 TypeScript 编写，旨在提供出色的 TS 使用体验

包含

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 的一个小包装 -US/docs/Web/API/Fetch_API），旨在简化请求。旨在为大多数用户在 createApi 中使用推荐的 baseQuery。

RTK Query 缓存的设计思想

Redux 一直强调可预测性和显式行为。Redux 没有“魔法”，所有 Redux 逻辑都遵循相同的基本模式，即通过 reducers 调度操作和更新状态。这确实意味着有时你必须编写更多代码才能使事情发生。

Redux Toolkit 核心 API 不会更改 Redux 应用程序中的任何基本数据流 你仍在调度操作和编写 reducer，只是代码比手动编写所有逻辑要少。 RTK Query 同理。这是一个额外的抽象级别，但在内部，它仍在执行我们已经看到的用于管理异步请求及其响应的完全相同的步骤。

但是，当你使用 RTK Query 时，会发生思维转变。我们不再考虑“管理状态”本身。相反，我们现在考虑“管理*缓存数据*”。与其尝试自己编写 reducer，我们现在将专注于定义 “这些数据来自哪里？”、“这个更新应该如何发送？”、“这个缓存的数据应该什么时候重新获取？”，以及“缓存的数据应该如何更新？”。如何获取、存储和检索这些数据成为我们不再需要担心的实现细节。