使用 RTK 查询获取组件树中的数据

Question

我想我误解了RTK查询的目的。

基本上我有一个应用程序，我需要在其中使用电子邮件和密码登录，此请求 returns 我的用户 ID。那是我的 API 文件

export const accountApi = createApi({
reducerPath: 'accountApi',
baseQuery: fetchBaseQuery({ baseUrl: location.origin }),
endpoints: (builder) => {
        getUserId: builder.query({
            query: ({ emailValue, passwordValue }) => ({
                            url: `/users`,
                            headers: {
                              'authentication-failure-code': 403,
                              'Authorization': `Basic btoa(`${(emailValue)}:${(passwordValue)}`)`,
                            }
                            responseHandler: (response) => response.text(),
            })
            transformResponse: (response) => applyDataCallback(response),
        }),
    }
},

在我的登录页面上，此请求 returns 我的用户 ID，我需要在我的应用程序中的所有未来请求中逐字使用它。但是，如果我显然没有电子邮件和密码，我如何在登录后在另一个组件中获取此 ID？

export default function MainApp() {
const { data: userId } = useGetUserIdQuery();

useGetUserIdQuery 需要登录和密码等参数，当然这样的代码会导致错误。

useSelector 在这里也不起作用，因为它只提供未规范化的缓存。

我是不是漏掉了一些基础知识？或者我应该只使用简单的 RTK 来保存我的 ID？

Answer 1

看起来您混淆了 API 层和存储。 RTK-Q 为您带来了一个包含缓存和其他 API-related 功能的包装层，使所有 data-fetching 获取生命周期在整个应用程序中更加轻松和一致。

您在寻找什么 - 是一个数据 storage-related 问题。它可以用任何现有的方法处理，如 Redux、Context、Localstorage 等。

我会说这里最适合您的解决方案 - 只需在登录后将 userId 放入 localStorage\cookies 一次，然后 - 在以后的所有请求中读取它。

为了帮助您解决这个问题 - 您可以定义一个自定义查询函数：

export const customBaseQuery: BaseQueryFn<string | FetchArgs, unknown, FetchBaseQueryError> 
  = async (args, api, extraOptions = {}) => {
  const userId = localStorage.getItem('userId')
  // Do what you want with userId, and pass it to the request

  const result = await fetchBaseQuery(args, api, extraOptions);

  // Optionally - can handle the response in some way
  return result;
};

之后你可以将它应用到你的 api 定义中，而不是 fetchBaseQuery:

baseQuery: customBaseQuery({ baseUrl: location.origin }),

使用 RTK 查询获取组件树中的数据

Get data in component tree using RTK Query

reactjs

rtk

rtk-query