如何在RTK Query中访问、更新及删除缓存数据（含认证场景）

一、直接访问并操作RTK Query缓存 #

RTK Query的缓存存储在Redux Store中，你可以通过内置工具方法直接读取、更新或清空缓存：

1. 读取缓存中的用户数据 #

如果是查询接口的缓存，直接用对应的useXXXQuery hook即可；如果是mutation的返回结果，可通过selectLatestResult获取最新值：

import { useSelector } from 'react-redux';
import { api } from './yourApiSlice';

// 获取登录mutation的最新返回结果
const latestUserInfo = useSelector(api.endpoints.login.selectLatestResult());
// 如果有获取用户信息的查询接口，直接用hook读取
const { data: user } = useGetUserQuery();

2. 登出时清空缓存 #

调用resetApiState可清空整个API的缓存数据，适合登出场景：

import { useDispatch } from 'react-redux';
import { api } from './yourApiSlice';

const handleLogout = () => {
  dispatch(api.util.resetApiState());
  // 配合路由跳转等操作完成登出流程
};

若只需清空特定缓存（比如仅用户相关），可通过invalidateTags标记缓存失效：

dispatch(api.util.invalidateTags(['User']));

3. 更新缓存中的用户数据 #

当token刷新、用户名修改时，用updateQueryData直接修改缓存内容：

import { useDispatch } from 'react-redux';
import { api } from './yourApiSlice';

const updateUserCache = (newUserData) => {
  dispatch(api.util.updateQueryData('getUser', undefined, (draft) => {
    // 合并新数据到缓存中
    Object.assign(draft, newUserData);
  }));
};

二、统一存储多场景返回的用户数据 #

通过**标签（Tags）**和onQueryStarted钩子，让登录、注册、重置密码等操作的返回数据统一更新到同一个缓存对象：

1. 配置API Slice的标签与钩子 #

为所有返回用户数据的mutation添加统一标签，并在请求完成后更新用户查询的缓存：

const api = createApi({
  reducerPath: 'api',
  baseQuery: fetchBaseQuery({ baseUrl: '/api' }),
  tagTypes: ['User'], // 定义用户数据标签
  endpoints: (builder) => ({
    login: builder.mutation({
      query: (credentials) => ({ url: '/login', method: 'POST', body: credentials }),
      onQueryStarted: async (_, { dispatch, queryFulfilled }) => {
        const { data } = await queryFulfilled;
        // 更新getUser查询的缓存
        dispatch(api.util.updateQueryData('getUser', undefined, () => data));
      },
    }),
    register: builder.mutation({
      query: (userData) => ({ url: '/register', method: 'POST', body: userData }),
      onQueryStarted: async (_, { dispatch, queryFulfilled }) => {
        const { data } = await queryFulfilled;
        dispatch(api.util.updateQueryData('getUser', undefined, () => data));
      },
    }),
    resetPassword: builder.mutation({
      query: (resetData) => ({ url: '/reset-password', method: 'POST', body: resetData }),
      onQueryStarted: async (_, { dispatch, queryFulfilled }) => {
        const { data } = await queryFulfilled;
        dispatch(api.util.updateQueryData('getUser', undefined, () => data));
      },
    }),
    getUser: builder.query({
      query: () => '/user',
      providesTags: ['User'], // 关联User标签
    }),
  }),
});

2. 全局统一获取用户数据 #

之后在任何组件中，只需调用useGetUserQuery就能获取统一维护的用户信息，无需再单独维护slice：

import { useGetUserQuery } from './yourApiSlice';

const UserProfile = () => {
  const { data: user, isLoading } = useGetUserQuery();
  
  if (isLoading) return <div>加载中...</div>;
  
  return (
    <div>
      <p>用户名：{user.username}</p>
      <p>邮箱：{user.email}</p>
    </div>
  );
};

三、辅助配置：自动清理闲置缓存 #

可通过keepUnusedDataFor设置闲置缓存的自动清理时长，配合手动清空提升缓存管理效率：

const api = createApi({
  reducerPath: 'api',
  baseQuery: fetchBaseQuery({ baseUrl: '/api' }),
  keepUnusedDataFor: 60, // 闲置60秒后自动清理缓存
  // ...其他配置
});

内容的提问来源于stack exchange，提问作者Irfan wani