如何在createApi中借助Redux store数据自定义RTK Query的query/mutation请求体

你可以通过替换原query配置为queryFn实现需求，queryFn的入参内置了getState方法可直接访问Redux store的全量数据，单端点适配方案代码如下：

// 先导入你项目的Redux根状态类型，比如RootState
import type { RootState } from '@/store'

export const loginIdentityApi = createApi({
  reducerPath: 'loginIdentity',
  baseQuery,
  tagTypes: ['Login'],
  endpoints: (build) => ({
    postLogin: build.mutation<TApiResponse, TPostBody>({
      // 用queryFn替换原query配置
      queryFn: async (postBody: TPostBody, api, extraOptions, baseQuery) => {
        // 从api参数中获取getState，读取store中你需要的节点数据
        const storeState = api.getState() as RootState
        // 示例：取store中common模块的deviceInfo、appId字段，可根据实际业务调整
        const storeExtraData = {
          deviceInfo: storeState.common.deviceInfo,
          appId: storeState.common.appId
        }
        // 合并postBody，注意传入的postBody优先级更高，放在后面避免被store数据覆盖
        const mergedBody = { ...storeExtraData, ...postBody }

        // 调用baseQuery发起请求，参数和原query配置一致
        return baseQuery({
          url: urlPrep(signin, {
            updateCookies: true,
          }),
          method: 'POST',
          body: mergedBody,
        })
      },

      transformResponse: (response: TApiResponse) => {
        return response
      },
      invalidatesTags: ['Login'],
    }),
  },
})

多端点全局适配方案 #

如果有多个端点都需要合并store数据到请求body，可以直接封装自定义baseQuery全局统一处理，无需逐个修改端点配置：

const customBaseQuery = async (args, api, extraOptions) => {
  const storeState = api.getState() as RootState
  const globalExtraData = {
    deviceInfo: storeState.common.deviceInfo,
    appId: storeState.common.appId
  }
  // 仅对POST请求合并body，可根据业务调整判断逻辑
  if (args.method === 'POST' && args.body) {
    args.body = { ...globalExtraData, ...args.body }
  }
  return baseQuery(args, api, extraOptions)
}

// createApi里替换baseQuery即可
export const loginIdentityApi = createApi({
  reducerPath: 'loginIdentity',
  baseQuery: customBaseQuery,
  // 其余配置保持不变
  // ...
})

注意事项 #

• api.getState()返回的是完整的Redux根状态，你需要根据自己项目的store结构调整取值逻辑
• 合并body时建议把自定义传入的postBody放在展开运算符的最后，保证传入的参数不会被store的默认字段覆盖
• 如果使用TypeScript，建议提前给getState()指定根状态类型RootState，避免类型报错

内容的提问来源于stack exchange，提问作者superdem