如何将RTK中组件A请求的数据作为组件B的useEffect依赖？

针对你的场景，有两种简洁的实现方式，都能满足组件B仅在组件A获取到数据后才执行逻辑的需求：

方案一：直接通过Selector读取RTK Query缓存 #

RTK Query会自动将请求结果缓存到Redux Store中，并且为每个API endpoint生成了对应的select方法，可以直接用它来精准获取指定参数的缓存数据。

组件B代码示例 #

import { useSelector } from 'react-redux';
import { apiSlice } from './path/to/your/apiSlice'; // 替换成你的API切片路径

const ComponentB = ({ searchText }) => {
  // 仅当有搜索文本时，才查询对应缓存；初始时返回undefined
  const items = useSelector(
    searchText?.content 
      ? apiSlice.endpoints.getItems.select(searchText.content)
      : () => undefined
  );

  useEffect(() => {
    // 只有当items存在时才执行业务逻辑
    if (items) {
      doSomeLogic(items);
    }
  }, [items]);

  return <div>{/* 组件内容 */}</div>;
};

说明 #

• apiSlice.endpoints.getItems.select是RTK Query自动生成的选择器，传入和组件A一致的查询参数（这里是searchText.content），就能拿到对应的缓存结果。
• 初始渲染时searchText为空，选择器返回undefined，useEffect不会触发；当组件A完成请求后，缓存更新，选择器拿到数据，useEffect自动执行。

方案二：使用useGetItemsQuery并跳过初始请求 #

利用RTK Query的缓存机制，组件B可以调用同个API的查询hook，但通过skip选项避免初始请求，后续直接读取组件A已缓存的数据。

组件B代码示例 #

import { useGetItemsQuery } from './path/to/your/apiSlice'; // 替换成你的API切片路径

const ComponentB = ({ searchText }) => {
  // 当没有搜索文本时跳过请求，有文本时读取缓存（不会重复发起API调用）
  const { data: items } = useGetItemsQuery(searchText?.content, {
    skip: !searchText?.content,
  });

  useEffect(() => {
    if (items) {
      doSomeLogic(items);
    }
  }, [items]);

  return <div>{/* 组件内容 */}</div>;
};

说明 #

• skip: !searchText?.content确保初始渲染时不会发起请求；当searchText有值时，RTK Query会先检查缓存，如果组件A已经请求过相同参数的数据，会直接返回缓存，不会发起新请求，完全不存在调用竞争的问题。

关键注意点 #

• 组件B需要能获取到最新的searchText：可以通过父组件传递props，或者将searchText存入全局Redux Store，确保组件B能匹配到组件A请求时用的参数。

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