如何在其他组件中获取RTK Query已缓存的接口数据？

首先先修正你代码中的两处小问题：

1. service.ts中endpoints的闭合括号后多了分号，应该改为括号：

const dataApi = createApi({
  reducerPath: 'reducerApi',
  baseQuery: fetchBaseQuery({
    baseUrl: 'someApiUrl',
  }),
  endpoints: (builder) => ({
    getByName: builder.query({
      query: (name: string) => name,
    }),
  }) // 这里修正为括号，而非分号
});

2. TriggerComponent.tsx中可以简化useLazyQuery的调用：

// 原写法
const { useLazyGetByNameQuery } = dataApi;
const [trigger] = useLazyGetByNameQuery();

// 简化后
const [trigger] = dataApi.useLazyGetByNameQuery();

接下来解决核心问题：RTK Query会自动将请求结果缓存到Redux Store中，你可以通过以下两种常用方式在其他组件中获取这些缓存数据：

1. 使用对应的useQuery钩子（推荐） #

RTK Query为每个query端点自动生成了use[EndpointName]Query钩子，在其他组件中传入相同的查询参数，钩子会直接返回缓存数据，不会重复发起请求：

// OtherComponent.tsx
import dataApi from './service';

const OtherComponent = () => {
  // 传入和TriggerComponent中触发时相同的参数（比如用户输入的name值）
  const { data, isLoading, error } = dataApi.useGetByNameQuery('用户输入的具体名称');

  if (isLoading) return <div>加载中...</div>;
  if (error) return <div>请求出错</div>;

  return <div>获取到的数据：{JSON.stringify(data)}</div>;
};

如果参数是动态的（比如需要从路由或其他状态获取），直接传入对应变量即可：

import { useParams } from 'react-router-dom';

const OtherComponent = () => {
  const { name } = useParams(); // 假设从路由获取参数
  const { data } = dataApi.useGetByNameQuery(name || '');
  // 渲染数据...
};

2. 直接通过useSelector读取Redux Store缓存 #

如果需要绕过RTK Query的钩子逻辑，也可以用Redux的useSelector直接访问Store中的缓存数据。RTK Query的缓存存储在state[reducerPath].queries下，每个查询条目以端点名称(参数)作为键：

// OtherComponent.tsx
import { useSelector } from 'react-redux';
import dataApi from './service';

const OtherComponent = () => {
  const targetName = '用户输入的具体名称';
  // 构建缓存键，格式为`getByName("${targetName}")`
  const cacheKey = `getByName("${targetName}")`;
  // 从Store中获取缓存数据
  const queryCache = useSelector(state => state.reducerApi.queries[cacheKey]);
  const data = queryCache?.data;

  return <div>直接读取的缓存数据：{JSON.stringify(data)}</div>;
};

注意：这种方式需要手动处理缓存键的格式，且无法自动处理缓存过期、重新请求等逻辑，仅在特殊场景下使用。

额外提示 #

• 如果你需要在多个组件间共享查询参数，可以将参数存在Redux Store或React Context中，确保各组件使用相同的参数获取对应缓存。
• RTK Query的缓存会自动管理失效，当相同参数的请求再次发起时，会根据配置的refetchOnMountOrArgChange等规则决定是否重新请求。

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