Typescript 我用相同的Redux—Toolkit查询同时呈现两个不同的组件，但使用不同的参数

您对所有订阅使用相同的查询缓存键，即端点名称.

serializeQueryArgs: ({ endpointName }) => endpointName,

通常，not指定serializeQueryArgs并让defaultSerializeQueryArgs函数处理它，这将创建一个缓存键，该键是端点名称和查询args的字符串化版本的组合.

从getPopularClips端点移除serializeQueryArgs将允许使用page和limit参数创建缓存条目.如果两个(or any duplicate)参数集跨两个或多个钩子调用使用，则它们would仍然共享高速缓存条目，因为高速缓存键将解析为相同.

如果出于某种原因，您仍然希望单独的查询挂钩与重复的查询参数被缓存，那么我建议在查询调用100中添加参数.

示例:

getPopularClips: builder.query<
  { posts: Array<Post>; hasMore: boolean },
  { id?: string; limit?: number; page: number }
>({
  providesTags: ['PopularClips'],
  query: ({ limit = 5, page }) => ({
    url: `/post/popular-clips`,
    params: {
      limit,
      page
    }
  }),
  transformResponse(baseQueryReturnValue: Post[], meta, arg) {
    return {
      posts: baseQueryReturnValue.map((clip) => ({
        ...clip,
        ...arg,
        fromQuery: `getPopularClips`
      })),
      hasMore: baseQueryReturnValue.length > 0havr 
    };
  },
  merge: (currentCache, newItems) => ({
    posts: uniqBy(
      [...currentCache.posts, ...newItems.posts],
      (clip) => clip.id
    ),
    hasMore: newItems.posts.length > 0
  }),
  forceRefetch: ({ currentArg, previousArg }) =>
    currentArg?.page !== previousArg?.page
}),

const { data } = useGetPopularClipsQuery({ id: "hook1", limit: 3, page: 1 });

const { data } = useGetPopularClipsQuery({ id: "hook2", limit: 3, page: 1 });