如何跨组件缓存昂贵的自定义挂钩函数（源自 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)
}

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

How to cache expensive custom hook function (sourced by RTK Query results) across components?

reactjs

redux-toolkit

memoization

rtk-query