RTK-Query中访问Redux Store状态：queryFn方法指南

RTK-Query端点与Redux状态访问的挑战

在构建基于redux toolkit query (rtk-query) 的数据获取层时，开发者有时需要在api端点定义内部访问当前的redux store状态。例如，请求体中可能需要包含来自store的认证令牌、用户id或特定配置参数，或者在响应数据转换时需要store中的密钥。

然而，RTK-Query的builder.query或builder.mutation中常用的query和transformResponse方法，其设计初衷是为了纯粹地处理请求参数和响应数据，并不直接提供访问Redux Store状态的机制。这意味着，如果尝试在这些方法中直接引用state对象，将会遇到访问权限的问题。

解决方案：利用 queryFn

为了解决在RTK-Query端点中访问Redux Store状态的需求，RTK-Query提供了更为强大的queryFn选项。queryFn允许开发者完全控制请求的执行逻辑，它替代了默认的query和transformResponse，提供了更深层次的灵活性。

queryFn函数签名如下： async (arg, api, extraOptions, baseQuery) => { ... }

其中，关键在于api对象。api对象包含多个实用工具，其中最重要的是api.getState()方法。通过调用api.getState()，我们可以获取到当前的Redux Store完整状态树的快照，从而访问其中存储的任何数据。

queryFn 实现示例

以下示例展示了如何使用queryFn在API请求体和响应数据转换中获取并使用Redux Store中的salt值：

无涯·问知

无涯·问知，是一款基于星环大模型底座，结合个人知识库、企业知识库、法律法规、财经等多种知识源的企业级垂直领域问答产品

40

查看详情

import { createApi } from '@reduxjs/toolkit/query/react';
import customFetchBase from './customFetchBase.js';
import { aesDEC } from 'src/util/public.util.js'; // 假设这是一个加密解密工具函数

export const authApi = createApi({
  reducerPath: 'authApi',
  baseQuery: customFetchBase, // 使用自定义的baseQuery
  endpoints: builder => ({
    getUser: builder.mutation({
      // 使用 queryFn 替代 query 和 transformResponse
      queryFn: async (arg, api, extraOptions, baseQuery) => {
        // 1. 通过 api.getState() 访问 Redux Store 状态
        const state = api.getState();
        // 假设 salt 存储在 Redux Store 的 userSlice 下
        const salt = state.user.salt; // 请根据您的实际 Store 结构调整路径

        try {
          // 2. 使用 baseQuery 发起实际的 HTTP 请求
          const { data, error } = await baseQuery({
            url: '/Account/Login/GetUserInfo',
            method: 'POST',
            body: {
              RequestVerificationToken: salt // 在请求体中使用从 Store 获取的 salt
            }
          });

          // 3. 处理响应数据
          if (error) {
            return { error }; // 如果 baseQuery 返回错误，则直接返回
          }

          // 在 transformResponse 逻辑中，使用从 Store 获取的 salt 进行解密
          return { data: aesDEC(data, salt) };
        } catch (error) {
          // 4. 捕获并返回潜在的运行时错误
          return { error: { status: 'CUSTOM_ERROR', message: error.message } };
        }
      },
    }),
  })
});

export const { useGetUserMutation } = authApi;

代码解析：

1. queryFn: async (arg, api, extraOptions, baseQuery) => { ... }: 定义一个异步函数作为queryFn，它接收多个参数。
2. const state = api.getState();: 这是核心步骤，通过api.getState()获取当前的Redux Store状态。
3. const salt = state.user.salt;: 从获取到的state对象中，按照您的Redux Store结构路径，提取所需的salt值。请务必根据您的实际reducer和slice结构调整state.user.salt这一路径。
4. await baseQuery(...): baseQuery参数是您在createApi中定义的baseQuery函数。您可以在queryFn内部调用它来执行实际的HTTP请求。这样，您就可以在调用baseQuery之前，动态地构造请求参数，例如将salt加入body。
5. 错误处理: queryFn内部需要自行处理请求可能产生的错误，并通过返回{ error }对象来通知RTK-Query。
6. 响应数据处理: 在baseQuery成功返回数据后，您可以在queryFn内部对数据进行进一步处理（例如本例中的aesDEC解密），然后通过返回{ data }对象来提供最终的响应数据。

注意事项与最佳实践

• queryFn的灵活性: queryFn提供了极高的灵活性，您可以在其中执行任何复杂的异步逻辑，包括但不限于条件请求、多个请求的组合、或基于Store状态的复杂数据预处理。
• getState()的只读性: api.getState()返回的是当前Store状态的一个快照，它是只读的。您不应该尝试在queryFn内部直接修改Store状态。如果需要修改状态，应该通过api.dispatch()派发相应的action。
• 状态路径的准确性: 访问state.yourSlice.yourValue时，请确保路径与您的Redux Store结构完全匹配。错误的路径会导致undefined错误。
• 错误处理: queryFn要求您自行处理所有可能的错误（网络错误、API错误、业务逻辑错误等），并通过返回{ error: ... }对象来向RTK-Query报告这些错误，以便RTK-Query能够正确地更新查询状态（例如isError）。
• 避免过度使用: 虽然queryFn功能强大，但如果您的需求仅是简单的请求和响应转换，并且不需要访问Store状态，那么优先使用query和transformResponse会使代码更简洁。只有当确实需要Store状态或更复杂的请求逻辑时，才考虑使用queryFn。
• 依赖管理: 如果queryFn依赖于Store中的特定状态，请确保该状态在请求发起时是可用的。

总结

当RTK-Query的query和transformResponse方法无法满足在API端点中访问Redux Store状态的需求时，queryFn提供了一个强大而灵活的替代方案。通过queryFn函数签名中提供的api对象及其getState()方法，开发者可以轻松地获取并利用Store中的任何状态值，从而实现更精细的请求控制和数据处理逻辑。正确地使用queryFn，能够极大地增强RTK-Query端点的功能性和适应性。

以上就是RTK-Query中访问Redux Store状态：queryFn方法指南的详细内容，更多请关注php中文网其它相关文章！