【React】RTK Query

RTK Query（Redux Toolkit Query）是 Redux Toolkit 提供的一个用于 数据获取、缓存、状态管理 的强大工具。它简化了数据请求和缓存的流程，是 Redux 中推荐的异步请求方案。

---

🧩 RTK Query 简化逻辑的核心方式

✅ 1. 自动请求状态管理

你不再需要手动维护 loading、error、data 状态。

const { data, isLoading, error } = useGetUserQuery(userId);

自动提供：

• data: 请求结果
• isLoading: 加载状态
• error: 错误信息
• refetch, isSuccess, isError, 等状态

---

✅ 2. 自动缓存和缓存同步

RTK Query 会：

• 自动对请求结果进行缓存
• 当参数相同的请求发出时，会复用已有缓存
• 提供 refetch, invalidateTags 等机制轻松管理缓存更新

---

✅ 3. API 统一定义，集中管理接口

使用 createApi() 统一定义接口，避免接口分散。

import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';

export const api = createApi({
  reducerPath: 'api', // reducer 在 store 中的 key
  baseQuery: fetchBaseQuery({ baseUrl: '/api' }),
  endpoints: (builder) => ({
    getUser: builder.query<User, string>({
      query: (id) => `users/${id}`,
    }),
    updateUser: builder.mutation<User, Partial<User>>({
      query: (user) => ({
        url: `users/${user.id}`,
        method: 'PUT',
        body: user,
      }),
    }),
  }),
});

export const { useGetUserQuery, useUpdateUserMutation } = api;

---

✅ 4. 支持自动重试、轮询、懒加载

RTK Query 提供了很多高级特性：

• 自动重试请求（retry 参数）
• 轮询（pollingInterval）
• 懒加载（useLazyXXXQuery()）

const [trigger, result] = useLazyGetUserQuery();

---

✅ 5. 标签机制简化数据依赖和刷新

通过 providesTags / invalidatesTags 自动管理哪些数据需要刷新。

getUser: builder.query({
  query: (id) => `users/${id}`,
  providesTags: (result, error, id) => [{ type: 'User', id }],
}),

updateUser: builder.mutation({
  query: (user) => ({
    url: `users/${user.id}`,
    method: 'PUT',
    body: user,
  }),
  invalidatesTags: (result, error, user) => [{ type: 'User', id: user.id }],
}),

这样，当你调用 updateUser 后，对应的 getUser 数据会自动重新请求。

---

🔍 对比传统 Redux 异步处理（如 Redux Thunk）

功能	传统 Redux + Thunk	RTK Query
状态管理	手动管理 loading/error/data	自动提供状态
缓存	手动实现	内置缓存策略
请求定义	分散在 action/reducer/middleware	集中在 createApi() 中定义
自动刷新依赖数据	不支持	支持标签机制自动刷新
代码复杂度	高	极简

---

🧪 示例：使用 RTK Query 获取用户信息

import { useGetUserQuery } from './services/api';

function UserInfo({ userId }) {
  const { data: user, isLoading, error } = useGetUserQuery(userId);

  if (isLoading) return <p>加载中...</p>;
  if (error) return <p>出错了！</p>;

  return <div>{user.name}</div>;
}

---

✅ 总结

优点	描述
🧠 状态自动管理	不再手动写 loading/data/error 逻辑
⚡ 自动缓存	避免重复请求，提高性能
🛠️ 接口集中配置	统一 API 层结构
♻️ 自动刷新	标签系统自动刷新相关数据
🔁 支持懒加载 / 轮询 / 重试	满足各种场景需求