react-hooks - 调用 RTK Query endpoint.select() 的正确方法(不带参数(并跳过选项))

Question

我想使用 endpoint.select() 函数从缓存的 RTK 查询数据创建选择器，参见 RTK Advanced Patterns .

文档明确指出，如果没有查询参数，您可以将 undefined 传递给 select()(请参阅选择用户数据部分)。

但是，在我的例子中，这不起作用，除非我通过 initiate() 函数触发查询。另一方面，当从查询钩子(Hook)触发查询时，选择器无法检索缓存数据。

这里的不工作设置非常简单:

export const productsApi = createApi({
  baseQuery: fetchBaseQuery({ baseUrl: API.ENDPOINTS.PRODUCTS }),
  reducerPath: 'productsApi',
  endpoints: (builder) => ({
    listAllProducts: builder.query({
      query: ()=>'/list',
    }),
  }),
});
export const { useListAllProductsQuery } = productsApi;

然后在 customHook 中调用 useListAllProducts 钩子(Hook):

const {
  data,
} = useListAllProductsQuery({skip:shouldSkip});

最后在选择器中:

export const selectProducts =
  productsApi.endpoints.listAllProducts.select(); //undefined param as docs recommend

可能的修复:(或者更像是一个 hacky 解决方法):奇怪的是，我发现如果我将一个参数(又名 cacheKey)传递给 select 函数并将相同的 cacheKey 传递给查询 Hook ，突然之间星星对齐并且一切正常(尽管文档声明这不是必需的)。所以修改后的代码看起来像:

// in selector
export const selectProducts =
  productsApi.endpoints.listAllProducts.select('products');

// in hook
const {
  data,
} = useListAllProductsQuery('products');

我想知道是否有人可以就此有效的原因给出一些智慧，或者更好的方法推荐在没有 cacheKey 的查询上使用 select 函数的最佳实践(因为文档似乎不正确或过时？)。

我还想指出，当调用不带参数的 select() 时， typescript 警告表面指示需要参数。

Answer 1

我不确定您认为文档在哪里声明您不需要参数。

您将需要使用调用钩子(Hook)时相同的参数调用select以获取该缓存键的选择器 - 所以如果你调用 useMyQuery()，你可以调用 select() - 如果你调用 useMyQuery(5)，你可以调用 select (5) 获取缓存键 5 的选择器。

这些是单独的缓存条目，您需要为每个缓存条目选择一个选择器。

另外，您能否阐明“不工作”的确切含义？使用选择器只会给你缓存条目，但不会发出请求——毕竟你只是从商店中选择。因此，在您使用钩子(Hook)或调度 initiate 之前，您将获得一个 uninitiated 缓存条目。