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

Question

我认为我误解了RTK查询的目的。

基本上，我有一个应用程序，需要使用电子邮件和密码登录，此请求将返回我的用户。这是我的

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),
        }),
    }
},

签名页面上的API文件，此请求将返回我的用户ID，我需要在应用程序中的所有将来的请求中使用它。但是，如果我显然没有电子邮件和密码，我如何在登录后将其在另一个组件中获取该ID？

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

USEGETUSERIDQUERY期望登录和通行证等参数，当然代码会导致错误。

USE -Elector也在这里也无法使用，因为它仅提供不归一化的缓存。

我在这里错过了一些基本知识吗？还是我应该只使用简单的RTK来保存我的ID？

Answer 1

看起来您正在混合API层和存储。
RTK-Q为您带来一个带有缓存和其他与API相关功能的包装层，以使所有数据提取生命周期的所有数据更轻松，一致。

您正在寻找什么 - 是一个与数据存储相关的问题。它可以使用Redux，Context，LocalStorage等任何现有方法来处理。

我要说的是，在这里适合您的解决方案 - 只是在登录后和之后将用户ID放入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 }),