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值：
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;代码解析：
- queryFn: async (arg, api, extraOptions, baseQuery) => { ... }: 定义一个异步函数作为queryFn，它接收多个参数。
- const state = api.getState();: 这是核心步骤，通过api.getState()获取当前的Redux Store状态。
- const salt = state.user.salt;: 从获取到的state对象中，按照您的Redux Store结构路径，提取所需的salt值。请务必根据您的实际reducer和slice结构调整state.user.salt这一路径。
- await baseQuery(...): baseQuery参数是您在createApi中定义的baseQuery函数。您可以在queryFn内部调用它来执行实际的HTTP请求。这样，您就可以在调用baseQuery之前，动态地构造请求参数，例如将salt加入body。
- 错误处理: queryFn内部需要自行处理请求可能产生的错误，并通过返回{ error }对象来通知RTK-Query。
- 响应数据处理: 在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端点的功能性和适应性。
