RTK Query 的缓存机制与自动重新获取策略

RTK Query 核心概念：

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

export const api = createApi({
  reducerPath: 'api',
  baseQuery: fetchBaseQuery({ baseUrl: '/api' }),
  tagTypes: ['Post', 'User'],
  endpoints: (builder) => ({
    getPosts: builder.query({
      query: () => '/posts',
      providesTags: ['Post'],
    }),
    addPost: builder.mutation({
      query: (body) => ({ url: '/posts', method: 'POST', body }),
      invalidatesTags: ['Post'], // 使 Post 相关缓存失效
    }),
  }),
});

缓存机制：

1. 按 key 缓存：每个查询基于 (endpoint, args) 生成唯一缓存 key
2. Cache Entry：缓存条目有 data、status、error 等字段
3. TTL（生存时间）：默认 60 秒无订阅后清除
   • keepUnusedDataFor 配置自定义（毫秒）

Tag System（标签系统）：

• providesTags：查询声明它提供了哪些标签
• invalidatesTags：变更操作使标签失效，自动重新获取相关查询
• 支持粒度的 ID 标签：{ type: 'Post', id: postId }

自动重新获取：

// 全局配置
const store = configureStore({
  middleware: (gDM) => gDM().concat(api.middleware),
});

// 窗口聚焦时重新获取
refetchOnFocus: true,
// 网络重连时重新获取
refetchOnReconnect: true,
// 轮询
useGetPostsQuery(undefined, { pollingInterval: 5000 })

优势：自动去重、自动缓存清除、无需手动管理 loading/error 状态、与 Redux DevTools 无缝集成。