如何将RTK数据制作为useEffect参数？

Question

我得到了三个组件，搜索组件、组件 A 和组件 B，一个惰性加载 RTK 调用 useLazyGetItemsQuery();

我想要实现的是：

1. 搜索组件输入搜索文本；
2. 获得搜索文本后，组件 A 使用延迟加载调用根据搜索文本获取项目
3. 拿到物品后，组件B做其他逻辑

在组件A中我需要做的是：

const [trigger, {data}:items] = useLazyGetItemsQuery();
if(searchText){
   trigger(searchText.content);
}

在组件B中，我的逻辑是基于组件A的API调用结果，所以应该是这样的：

//Get the items from RTK store once items exist, shouldn't call in the initial render
const items = ?
//
useEffect(()=>{
 doSomeLogic
},[items]
)

我的问题是B组件应该怎么写？

组件 B 在初始渲染中不应该执行任何操作，只有在组件 A 完成 API 调用并获取数据后才可以工作。

如果没有RTK，我可以在B组件中使用选择器，但是现在，我还可以写一个选择器直接从API Slice获取数据吗？ 或者我应该使用组件 B 中的参数进行另一个 RTK 调用？如果我应该再次进行 RTK 调用（我知道它已缓存），如何防止与组件 A 发生调用竞争？

Answer 1

您可以在组件 B 中使用 useQuery hook 直接访问缓存的数据。 只需记住将其最初设置为禁用以避免初始获取。 会是这样的：

 const { data: items } = useQuery('getItems', () => useLazyGetItemsQuery().trigger(), {
    enabled: false,
    });
    
    useEffect(() => {
  if (items) {
    doSomeLogic(items);
  }
}, [items]);