在RTK-Query端点中安全访问Redux Store状态

理解RTK-Query端点中的状态访问限制

在redux toolkit query (rtk-query) 中，createapi 定义的 endpoints 允许我们通过 builder.query 或 builder.mutation 来声明数据获取和修改操作。通常，我们会在 query 方法中定义请求的 url、方法和请求体，并在 transformresponse 中对响应数据进行预处理。然而，这两个方法的设计初衷是纯粹地处理请求和响应，它们本身并没有提供直接访问整个 redux store 状态的机制。

例如，在需要从 Redux Store 中获取一个动态值（如认证令牌 salt、用户ID或特定配置）来构建请求体或对响应进行解密时，query 或 transformResponse 的这种限制就会成为一个挑战。原始代码示例中尝试在 query 的 body 和 transformResponse 中使用一个名为 salt 的变量，而这个 salt 预期是从 Redux Store 中获取的，这正是上述限制的具体体现。

引入 queryFn：更强大的自定义查询函数

为了解决在 RTK-Query 端点中访问 Redux Store 状态的需求，RTK-Query 提供了 queryFn 选项。queryFn 是一个高度可定制的异步函数，它能够完全替代 query 和 transformResponse 的功能，并提供了更深层次的控制能力，包括访问 Redux Store 状态。

当使用 queryFn 时，你的查询函数会接收到以下参数：

• arg: 调用 useYourMutation 或 useYourQuery 时传递的参数。
• api: 一个包含 getState()、dispatch() 等方法的对象，其中 api.getState() 是获取当前 Redux Store 状态的关键。
• extraOptions: 在 createApi 或 endpoint 级别定义的额外选项。
• baseQuery: 定义 createApi 时使用的 baseQuery 函数，用于执行实际的网络请求。

通过 api.getState()，你可以在执行网络请求之前或之后，方便地从 Redux Store 中读取任何所需的数据。

造点AI

夸克 · 造点AI

325

查看详情

实现细节：使用 queryFn 访问 Store 状态

让我们将原始代码示例重构为使用 queryFn，以实现在 getUser mutation 中访问 Redux Store 中的 salt。

import { createApi } from '@reduxjs/toolkit/query/react';
import customFetchBase from './customFetchBase.js';
import { setUserInfo, setUserPermissions } from '../features/userSlice.js';
import { aesDEC } from 'src/util/public.util.js';

export const authApi = createApi({
  reducerPath: 'authApi',
  baseQuery: customFetchBase,
  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 的某个位置，例如 state.auth.salt
        // 请根据你的实际 Redux Store 结构调整路径
        const salt = state./* path to salt state value */; 

        try {
          // 2. 使用 baseQuery 执行实际的网络请求
          // 将从 Store 获取的 salt 注入到请求体中
          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 };
        }
      },
    }),
  })
});

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./* path to salt state value */;: 从获取到的 state 对象中，根据你的 Redux Store 结构，准确地取出 salt 值。例如，如果 salt 存储在 userSlice 中，可能是 state.user.salt。
4. const { data, error } = await baseQuery(...): 调用 baseQuery 函数来执行实际的 HTTP 请求。baseQuery 的参数与 query 方法的参数结构类似。在这里，我们将从 Store 中获取的 salt 值动态地插入到请求体 RequestVerificationToken 中。
5. 错误处理: queryFn 内部需要自行处理 baseQuery 返回的错误，并以 { error } 的形式返回，以便 RTK-Query 能够正确识别和处理。
6. 数据转换: 原始 transformResponse 中的 aesDEC(response.data, salt) 逻辑现在直接集成在 queryFn 内部，在 baseQuery 返回数据后立即执行，并使用从 Store 获取的 salt 进行解密。最终结果以 { data: ... } 的形式返回。

注意事项与最佳实践

• 路径准确性: 确保 state./* path to salt state value */ 中的路径与你的 Redux Store 实际结构完全匹配，否则将无法正确获取到数据。
• queryFn 替代性: 一旦使用了 queryFn，就不能再同时使用 query 和 transformResponse。queryFn 会完全接管这两个方法的职责。
• 异步操作: queryFn 必须是一个异步函数，因为它通常会涉及等待 baseQuery 的网络请求结果。
• 返回格式: queryFn 必须返回一个对象，包含 data 或 error 属性，以符合 RTK-Query 的预期响应格式。
• 错误处理: 在 queryFn 内部进行全面的错误处理至关重要，包括 baseQuery 可能返回的错误以及自定义逻辑中可能抛出的异常。
• 副作用管理: 尽管 api.dispatch() 也可以在 queryFn 中使用，但通常不建议在数据获取逻辑中直接进行复杂的 Redux Store 副作用（如修改其他状态），除非是处理认证令牌过期等特定场景。保持 queryFn 的主要职责是数据获取和转换。

总结

通过 queryFn，RTK-Query 提供了极大的灵活性，允许开发者在端点逻辑中访问 Redux Store 的当前状态。这使得构建需要动态参数（如认证令牌、用户偏好设置）的请求，或在请求/响应处理过程中依赖 Store 状态进行复杂逻辑（如数据加解密）的场景变得可能。掌握 queryFn 的使用，将显著提升你在 RTK-Query 中处理复杂数据流的能力。

以上就是在RTK-Query端点中安全访问Redux Store状态的详细内容，更多请关注php中文网其它相关文章！