如何使用参数在 RTK 查询中调用 endpoint.select() 以检索缓存数据（在另一个选择器中）？

Question

我有一个接受参数的端点，我正在尝试使用 redux 切片中的 endpoint.select() 访问缓存数据。问题是我不知道如何传入缓存键。我做了以下事情：

export const selectProductsResult = (storeId) =>
   storeApi.endpoints.listProductsByStore.select(storeId);

如果我在这样的组件中使用它，效果很好：

const currentStoreProducts = useSelector(selectProductResult(currentStoreId))

我不明白的是如何在另一个选择器中使用它，例如这不起作用：

 const selectCurrentProducts = createSelector((selectCurrentStoreId), currentStoreId 
     => selectProductResult(currentStoreId)

如果我尝试在这样的组件中使用它：

const currentProducts = useSelector(selectCurrentProducts)

获得的值是一个记忆函数。我玩了很多，似乎无法构建所需的选择器。

Answer 1

对 someEndpoint.select() 的调用会生成一个新的选择器函数，该函数专门用于查找该缓存键的数据。松散地说，想象它看起来像这样：

const createEndpointSelector = (cacheKey) => {
  return selectorForCacheKey = () => {
    return state.api.queries['someEndpointName'][cacheKey];
  }
}

const selectDataForPikachu = createEndpointSelector('pikachu');

因此，您需要使用实际缓存键本身调用 someEndpoint.select()，它 returns 一个知道如何检索该缓存键数据的新选择器：

const selectDataForPikachu = apiSlice.endpoints.getPokemon.select('pikachu');

// later, in a component
const pikachuData = useSelector(selectDataForPikachu);

如何使用参数在 RTK 查询中调用 endpoint.select() 以检索缓存数据（在另一个选择器中）？

How to call endpoint.select() in RTK query with an argument to retrieve cached data (within another selector)?

redux

redux-toolkit

rtk-query