将 RTK 查询的数据与存储中保存的数据相结合

Question

在我们的应用程序中，我们已迁移到 RTK 查询来获取数据。虽然应用程序变得更加复杂，但我们有不同的用例，但我们并不完全确定如何解决它们..

在我们的一个 api 切片中，我们有一个

endpoint

，称为

getPosts

（不是真的，但为了示例）。像这样的东西：

    .injectEndpoints({
    endpoints: (build) => ({
      getPosts: build.query<
        IAPIResponse<IPost[]>
      >({
        query: () => {
          const body = {
              ...
          };
          return {
            method: 'POST',
            url: `${baseUrl}/search`,
            body: {...body, pagination: {perPage: -1}},
          };
        },
      }),
    }),

获取此列表后，我们希望初始化每个获取的帖子上的所有类型的元数据，例如

isFocused

。

isFocused

可以通过 UI 修改，并且在服务器上没有持久性。

所以我正在考虑针对这种情况的两种解决方案：

1. 在此端点上实现

   transformResponse

   并添加上面提到的初始元数据。这里的“坏事”是我无法更改这些属性的状态，因为它们将存储在 api 切片中。像这样的东西：

        transformResponse: ({posts}) => {
          return posts.map(post => {...post, isFocused: false});
        },

将常规 redux 切片上的元数据保存为映射，其中键是

postId
2. ，值是

   metadata

   ，为了获取包含元数据的帖子，我需要使用获取的数据执行计算选择器和存储的数据。

   好事

   是我可以通过触发一些操作来更改元数据。选择器看起来像这样：

export const selectPosts = createSelector(
  [api.endpoints.getPosts.select(), getMetadaPosts],
  (posts, metadaMap) => {
    return posts.map((post) => {
      return {
        ...post,
        metadata: metadaMap[post.id],
      };
    });
  },
);

正确的做法是什么？还有其他设计吗？

Answer 1

export const useGetPosts = (args:MyQueryArgs) => {

const someStuffFromStore = useAppSelector(…);

return useGetPostsQuery(args, { 
  transfomrmResponse: ({ data }) => ({/* My additional logic here */}),
});

这样你可以获得非常灵活的钩子，比使用 redux 核心方法更容易设置和维护..