Redux Toolkit中RTK Query参数自动绑定方案探讨

背景介绍

在使用Redux Toolkit的RTK Query时，开发者经常会遇到一个常见场景：许多查询和变更操作都需要从Redux store中获取参数。这些参数通常可以通过静态选择器(selector)从store中直接获取，但在实际使用中，开发者不得不为每个端点(endpoint)编写大量包装器代码来绑定这些参数。

问题分析

以一个获取机器人版本的查询为例，开发者通常会这样编写代码：

export const useQueryGetBotVersion = ({ version }: { version: string }) => {
  const botId = useSelector(openBotIdSelector)
  return botsApi.useGetBotVersionQuery(
    { id: botId!, version },
    { skip: !botId || !version }
  )
}

这种模式会导致：

1. 大量重复的包装代码
2. 需要为每个端点编写hook、selector和thunk三种包装器
3. 代码可维护性降低

解决方案探索

理想API设计

理想的解决方案是在端点定义时就能声明哪些参数应该从store中自动绑定：

getBotVersion: builder.query<BotSchema, { id: BotId; version: string }>({
  query: ({ id, version }) => `bots/${id}/versions/${version}`,
  bindParamsFromStore: state => ({
    id: openBotIdSelector(state),
  })
})

技术挑战

实现这一功能面临几个技术难点：

1. 类型循环依赖：RootState类型部分来源于API定义，在API定义中使用RootState可能导致循环类型问题
2. 类型复杂性：需要同时跟踪"完整端点参数"、"从state派生的参数"和"调用时提供的参数"三种类型
3. React Hook限制：在useMutation中获取当前state需要特殊处理

用户空间实现方案

虽然官方暂不考虑内置此功能，但开发者可以在用户空间(userland)实现类似功能。核心思路是创建一个高阶函数来包装RTK Query端点：

const createEndpointHelper = {
  query: <CallSiteArgs, Endpoint extends ApiEndpointQuery<any, any> & QueryHooks<any>>(
    endpoint: Endpoint,
    skipCondition: (args: EndpointArgs<Endpoint>) => boolean,
    transformArgs: (state: RootState, callSiteArgs: CallSiteArgs) => EndpointArgs<Endpoint>
  ) => {
    // 实现initiate、select、useQuery等方法
  },
  
  mutation: <CallSiteArgs, Endpoint extends ApiEndpointMutation<any, any> & MutationHooks<any>>(
    endpoint: Endpoint,
    skipCondition: (args: EndpointArgs<Endpoint>) => boolean,
    transformArgs: (state: RootState, callSiteArgs: CallSiteArgs) => EndpointArgs<Endpoint>
  ) => {
    // 实现initiate、useMutation等方法
  }
}

使用示例：

const originalVersionQueryHelper = createEndpointHelper.query(
  botsApi.endpoints.getBotVersion,
  (args) => !args.id || !args.version,
  (state, callSiteArgs: void) => ({
    id: openBotIdSelector(state)!,
    version: originalVersionStringSelector(state)!
  })
)

实现细节与技巧

1. 类型处理：需要精确定义端点参数类型和转换函数类型
2. 跳过条件：提供灵活的跳过条件判断，避免无效请求
3. 状态获取：在mutation中通过dispatch技巧获取当前state
4. 工具函数：提供常用工具函数如skipWhenSomeFalsy和neverSkip

总结

虽然Redux Toolkit官方暂不考虑内置参数自动绑定功能，但通过高阶函数包装的方式，开发者仍然可以在用户空间实现类似效果。这种方案虽然类型处理较为复杂，但能显著减少重复代码，提高开发效率。对于大型项目来说，这种投入是值得的。

未来如果社区对此需求强烈，或许可以考虑将其作为RTK Query的官方扩展功能。在此之前，用户空间的实现方案是一个可行的替代选择。