如何用Redux-Toolkit (RTK) Query避免重复请求共享数据？

RTK Query本身就帮你搞定了这个问题，默认自带重复请求抑制和缓存机制，同一个接口的相同参数请求只会发一次，后续组件直接读缓存就行，具体做法分这几种：

• 直接使用自动生成的hooks
  你用createApi生成的useGetCartItemsQuery，不管在购物车组件还是导航栏组件里调用，只要参数完全一致，RTK Query会自动处理：

  • 如果已经有正在进行的请求，新的组件调用会等待该请求完成后直接复用结果
  • 如果缓存里已有有效数据，直接返回缓存内容，不会发起新请求
    代码示例：
    购物车组件中：

  const { data: cartItems } = useGetCartItemsQuery();
  

  导航栏组件中：

  const { data: cartItems } = useGetCartItemsQuery();
  

  这样只会发送一次请求，两个组件共享同一份数据。

• 自定义缓存规则（按需调整）
  如果想控制缓存的有效期，比如让数据在5分钟内无需重新请求，可以在创建API时配置keepUnusedDataFor：

  const api = createApi({
    reducerPath: 'cartApi',
    baseQuery: fetchBaseQuery({ baseUrl: '/api/' }),
    keepUnusedDataFor: 300, // 单位为秒，默认是60秒
    endpoints: (builder) => ({
      getCartItems: builder.query({
        query: () => 'cart/items',
      }),
    }),
  });
  

  要是需要主动刷新数据（比如用户点击刷新按钮），可以调用hook返回的refetch方法，或者给hook传入refetchOnMountOrArgChange: true，但这不会影响默认的重复请求抑制逻辑。

• 直接从Redux Store读取缓存数据
  如果不想使用hook，也可以通过useSelector直接从store中读取RTK Query缓存的购物车数据，这种方式同样不会触发新请求：

  import { useSelector } from 'react-redux';
  import { api } from './cartApi';
  
  const Navbar = () => {
    const cartResult = useSelector(api.endpoints.getCartItems.select());
    const itemCount = cartResult?.data?.length || 0;
    return <div>购物车({itemCount})</div>;
  };
  

  注意这种情况需要处理数据未加载的状态，比如cartResult.isLoading时显示加载提示。

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