如何跨组件缓存昂贵的自定义挂钩函数（源自 RTK 查询结果）？

Question

我已将 RTK 查询设置为应用程序中的 API 层。这替换了之前存储在 redux 中用于构建选择器的数据（使用来自重新选择的 CreateSelector）。

现在有了 RTK 查询，一切都在钩子中，所以我很自然地尝试将 CreateSelector 中的逻辑移动到来自 RTK 查询结果的各种钩子，如下所示：

useSelectStoreDetailedData = () => {
    const {storesData} = useListStoresQuery()
    const {productsData} = useListProductsQuery()
    const {pricesData} = useListPricesQuery()
    return useMemo(()=> runExpensiveFunc(storesData, productsData, pricesData), 
     [storesData, productsData, pricesData])
}

当 1 个组件调用此钩子时，这可以正常工作，但如果许多组件需要此数据，每个组件调用钩子（即useSelectStoreDetailedData()）都会导致数据从头开始重新处理，因为它正在挂载钩子的另一个实例。由于这是一项非常昂贵的操作，因此这会导致应用程序明显变慢。

我尝试过使用 lodash memoize 函数来获取这个昂贵的函数并记住它，但这也是确定相等性的昂贵操作。

是否有更好的模式来跨组件共享这种源自 api 的计算？

Answer 1

您只需使用reselect选择器即可。

const selector = createSelector(...)


useSelectStoreDetailedData = () => {
    const {storesData} = useListStoresQuery()
    const {productsData} = useListProductsQuery()
    const {pricesData} = useListPricesQuery()
    return selector(storesData, productsData, pricesData)
}