0Pricing
React Academy · 课时

RTK Query：端点与自动缓存

使用 createApi 定义查询和变更端点，并让 RTK Query 管理缓存。

RTK Query：端点与自动缓存 是 CoddyKit 上的免费 React Academy 课时。 这是第 3 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 React Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 React Academy 课程共包含 4 节课。

欢迎

本课将介绍如何使用 RTK Query 的 createApi 定义查询和变更端点，并让它自动管理缓存、加载状态和数据获取。

什么是 RTK Query

RTK Query 是内置于 Redux Toolkit 的数据获取和缓存层。它无需手动管理加载和错误状态，可以合并重复请求，并按端点和参数缓存响应。

使用 createApi 创建 API

使用 reducerPath、baseQuery 和 endpoints 调用 createApi()。返回结果包括自动生成的 React 钩子。
import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';

export const userApi = createApi({
  reducerPath: 'userApi',
  baseQuery: fetchBaseQuery({ baseUrl: '/api' }),
  endpoints: (builder) => ({
    getUser: builder.query({ query: (id) => '/users/' + id }),
    getUsers: builder.query({ query: () => '/users' }),
  }),
});

export const { useGetUserQuery, useGetUsersQuery } = userApi;

将 API 添加到 store

将生成的归约器和中间件添加到 configureStore。中间件负责处理缓存生命周期、失效和重新获取。
import { configureStore } from '@reduxjs/toolkit';
import { userApi } from './userApi';

export const store = configureStore({
  reducer: { [userApi.reducerPath]: userApi.reducer },
  middleware: (gDM) => gDM().concat(userApi.middleware),
});

使用查询钩子

在组件中调用生成的钩子。它会返回 data、isLoading、isError 和 refetch。数据会按参数缓存——相同参数的同一个钩子会立即返回缓存数据。
function UserCard({ id }) {
  const { data, isLoading, isError } = useGetUserQuery(id);
  if (isLoading) return <Spinner />;
  if (isError) return <p>Error</p>;
  return <p>{data.name}</p>;
}

自动去重

如果两个组件同时挂载并调用 useGetUsersQuery()，RTK Query 只会发送一个网络请求，并在两个组件之间共享响应。

使用 keepUnusedDataFor 设置缓存 TTL

控制所有订阅者卸载后，缓存数据在 store 中保留多长时间。默认值为 60 秒。您可以为每个端点单独设置。
endpoints: (builder) => ({
  getUser: builder.query({
    query: id => '/users/' + id,
    keepUnusedDataFor: 300, // 5 minutes
  }),
})

轮询实时数据

在钩子调用中传入 `pollingInterval`，即可每隔 N 毫秒自动重新获取数据。这对于仪表板和实时信息流很有用。
const { data } = useGetStatsQuery(undefined, {
  pollingInterval: 5000, // refetch every 5 seconds
});

查询参数与跳过查询

传入 undefined，或使用 `skip` 选项有条件地跳过查询。当所需 ID 尚不可用时，这种方式很有用。
const { data } = useGetUserQuery(userId, { skip: !userId });

转换响应

使用 `transformResponse` 在缓存 API 响应之前重新组织其结构。这样可以让组件保持简洁——它们接收的是处理后的结构，而不是原始 API 格式。
getUsers: builder.query({
  query: () => '/users',
  transformResponse: (raw) => raw.data.users,
})

快速检查

如果两个组件同时使用相同参数调用同一个 RTK Query 钩子，会发生什么？

回顾

createApi 定义端点并生成具有类型定义的钩子。将归约器和中间件添加到 store。查询钩子会返回 data、isLoading 和 isError。响应会自动缓存并去重。

接下来

下一课：**乐观更新与缓存失效**——您将让变更操作立即更新界面，并使用标签使缓存数据失效。

常见问题解答

「RTK Query：端点与自动缓存」课时是免费的吗？

是的 — 「RTK Query：端点与自动缓存」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 React Academy 课程的其余内容，请升级到 CoddyKit PRO。 React Academy 课程共包含 4 节课。

「RTK Query：端点与自动缓存」这节课中我会学到什么？

使用 createApi 定义查询和变更端点，并让 RTK Query 管理缓存。 你通过在浏览器中直接运行的动手代码来练习 React Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 React Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 React Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 3 节课，共 4 节。

「RTK Query：端点与自动缓存」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 React Academy 课中编写并运行代码吗？

能。每节 React Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

  1. Redux Toolkit 切片与 createSlice
  2. 使用 createAsyncThunk 处理异步逻辑
  3. RTK Query：端点与自动缓存
  4. 乐观更新与缓存失效
← 返回 React Academy