为什么我的标签在 redux api 中无法正常工作？

Question

我正在使用react/redux，这里是用户端点，你可以看到我有一个getUsers和getSingleUser。在我的应用程序中，当我第一次转到使用 getUsers 查询的 usersList 页面时，所有用户都会被获取并提供一个标签，但是当我单击每个单独的用户转到使用 getSingleUser 的 singleUser 页面时，我可以看到redux 不会从之前缓存的标签中读取用户数据，而是再次重新获取用户，并为其提供另一个标签，所以会发生的情况是，现在我必须为同一用户添加标签（65e0ef744995aa9b6b8d1af4[0] 和 65e0ef744995aa9b6b8d1af4[ 1])，一个用于使用 getUsers 获取的用户，一个用于使用 getSingleUser 获取的用户。

如何解决这个问题？

import { apiSlice } from "../apiSlice";

const userApiSlice = apiSlice.injectEndpoints({
  endpoints: (builder) => ({
    getUsers: builder.query ({
      query: () => 'user',
      providesTags: (result, error, context) => {
        if (!error && result) {
          return [{type: 'User', id: 'LIST'}, ...result.users.map(user => ({type: 'User', id: user._id}))]
        } else {
          return [{type: 'User', id: 'LIST'}]
        }
      }
    }),
    getSingleUser: builder.query ({
      query: (id) => `user/${id}`,
      providesTags: (result, error, context) => {
        if (result && !error) {
          return [{type: 'User', id: result.user._id}]
        }
      }
    }),
    getUserBySearch: builder.query ({
      query: (search = '') => `user/search?q=${search}`,
      providesTags: (result, error, context) => {
        if (!error && result) {
          return [{type: 'User', id: 'LIST'}, ...result.users.map(user => ({type: 'User', id: user._id}))]
        } else {
          return [{type: 'User', id: 'LIST'}]
        }
      },
      keepUnusedDataFor: 5,
    }),
    createUser: builder.mutation({
      query: (credentials) => ({
        url: 'user',
        method: 'POST',
        body: credentials,
      }),
      invalidatesTags: [{type: 'User', id: 'LIST'}]
    }),
    deleteUser: builder.mutation ({
      query: (id) => ({
        url: `user/${id}`,
        method: 'DELETE'
      }),
      invalidatesTags: (result, error, context) => {
        console.log(`this is result: ${JSON.stringify(result)}`)
        if (result?.id && !error) {
          return [{type: 'User', id: result.id}]
        }
      }
    })
  })
})

export const {
  useGetUsersQuery,
  useGetSingleUserQuery,
  useGetUserBySearchQuery,
  useCreateUserMutation,
  useDeleteUserMutation
} = userApiSlice;

我期望在使用 getUsers Query 后，立即获取 SingleUser 数据，而无需等待。 顺便说一句，我正在使用 redux devtools，这就是我知道正在制作同一标签的两个实例的方式

Answer 1

getSingleUser 将无法从不同端点的缓存中获取值。相反，每当您更改使用户标签无效的内容时，都会导致重新获取获取集合的查询和该标签的单独查询。

处理此问题的更好方法可能是为您已经进入的用户提供通过依赖注入显示的内容，然后如果您在某个地方需要它，而您不会拥有所有用户，请在视图之上的级别使用 getSingleUser 挂钩仅显示该用户的数据。如果您构建视图只是为了显示用户数据而不关心数据来自哪里，那么您可以在父组件中处理获取该数据。关注点分离 FTW！