我使用的是REACT/REDUX,下面是用户端点,您可以看到我有一个getUser和一个getSingleUser.在我的应用程序中,当我第一次转到使用getUser查询的UsersList页面时,所有用户都被获取并提供了一个标记,但是当我单击每个单独的用户转到使用getSingleUser的singleUser页面时,我可以看到redux没有从以前缓存的标记中读取用户数据,它再次重新获取用户,并为其提供另一个标记,因此现在我必须为同一用户(65e0ef744995aa9b6b8d1af4[0]和65e0ef744995a9b6b6b8d1daf4[1])标记一个标记,一个标记用于使用getUser获取的用户,另一个用于使用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;

我期望在使用getUser查询后,立即获得SingleUser数据,而不必等待. 顺便说一句,我正在使用Redux DevTools,这就是为什么我知道同一个标签的两个版本正在被制作

推荐答案

每个端点实际上是它自己的实体,使用它自己的缓存.终结点不知道其他终结点的缓存结果.你描述的行为听起来像是应用了乐观/悲观的更新.getUsers端点可以在成功后更新其他端点的高速缓存.

有关详细信息,请参阅Manual Cache Updates,特别是Creating new cache entries or replacing existing ones.

使用getUser终结点的onQueryStarted方法更新getSingleUser终结点的缓存,通过查询id参数有效地使用用户数据预先填充该终结点.

示例:

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' }];
        }
      },
      onQueryStarted: async (_, { dispatch, queryFulfilled }) => {
        try {
          const { data } = await queryFulfilled;

          await Promise.all(
            data.map(user => dispatch(
              api.util.upsertQueryData(
                'getSingleUser',             // endpoint cache to create/update
                user._id,                    // user id query arg
                (draft) => {
                  Object.assign(draft, user) // user data to cache
                }
              )
            )).unwrap()
          );
        } catch(error) {
          // handle/ignore
        }
      },
    }),
    getSingleUser: builder.query ({
      query: (id) => `user/${id}`,
      providesTags: (result, error, context) => {
        if (result && !error) {
          return [{ type: 'User', id: result.user._id }]
        }
      }
    }),
    ...
  })
});

Reactjs相关问答推荐

如何通过TEK查询将对象传递到Express后台

如何使用React Router创建响应式主详细信息应用程序?

无法在列表中看到文本

安装后未渲染tailwind

将cy.get()与动态类名一起使用?

XChaCha20-Poly1305的解密函数

我应该如何管理设置组件初始状态的复杂逻辑?

如何从react 18-nextjs 14应用程序路由中的客户端组件呈现服务器组件?

使用自动播放的视频组件呈现登录页面时出现JEST测试错误

在react上隐藏源映射

更新对象状态的父数组时记住子组件

Symfony ux-react:使用react_component()时React组件不会渲染

预期无限重新渲染但没有发生

React Context API 在 Next.js 中更改路由时获取默认数据

useMemo 依赖项的行为

无法在 KeyDown 上调用 useCallback 函数

顶点图表甜甜圈项目边框半径

如果传递给挂钩的数据需要事先修改,如何使用自定义挂钩?

在react 路由dom版本6中的组件内添加路由

RTK 查询 POST 方法不会改变数据