如何在另一个视图中复用RTK Query已缓存的数据？

方法一：直接复用useGetClientsQuery Hook（最简单） #

RTK Query默认会对相同查询参数的请求做缓存复用，只要你在另一个组件里传入相同的username参数调用useGetClientsQuery，它会直接读取缓存数据，不会发起新的API请求：

// 目标视图组件
import { useGetClientsQuery } from './path/to/tradesApi';

export const AnotherView = () => {
  // 传入相同参数"x@x.com"，直接读取缓存
  const { data: clients, isLoading } = useGetClientsQuery("x@x.com");

  if (isLoading) return <div>加载中...</div>;
  if (!clients) return <div>暂无数据</div>;

  return (
    <div>
      {clients.map(client => (
        <div key={client.id}>{client.name}</div>
      ))}
    </div>
  );
};

方法二：使用RTK Query选择器手动读取缓存 #

如果你需要在组件外（比如Redux中间件、Thunk）或者更直接地访问Store中的缓存数据，可以用RTK Query生成的专属选择器：

// 目标视图组件
import { useSelector } from 'react-redux';
import { tradesApi } from './path/to/tradesApi';

export const AnotherView = () => {
  // 用select方法生成选择器，传入查询参数"x@x.com"定位缓存条目
  const clientCache = useSelector(tradesApi.endpoints.getClients.select("x@x.com"));

  if (!clientCache.data) return <div>暂无数据</div>;

  return (
    <div>
      {clientCache.data.map(client => (
        <div key={client.id}>{client.name}</div>
      ))}
    </div>
  );
};

补充说明 #

• RTK Query的缓存Key由「Endpoint名称 + 查询参数」共同决定，只要参数完全匹配，就能命中对应的缓存条目。
• 若不需要刷新数据，不要给useGetClientsQuery添加refetchOnMountOrArgChange这类强制刷新的选项。

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