使用TypeScript泛型创建React Redux Action，求代码正确性验证

首先，我们来拆解你遇到的问题：调用defaultAPIAction.request()时出现payload报错，核心原因是当前的createAction泛型设计没有适配API请求三个阶段（REQUEST/SUCCESS/FAILURE）的差异化payload类型需求，且泛型缺少默认值导致无payload调用不合法。

原代码的问题点 #

你的createAction函数在顶层定义了泛型<T>，这意味着当你通过createApiAction生成defaultAPIAction时，三个action创建器（request/success/failure）会共享同一个T类型。但实际业务场景中：

• REQUEST可能不需要payload，或者需要请求参数类型
• SUCCESS需要接口响应数据类型
• FAILURE需要错误信息类型
  单一泛型无法满足这种差异化需求，同时因为T没有默认值，当你调用request()不传payload时，TypeScript会提示缺少必要参数。

修正后的实现方案 #

1. 调整基础createAction函数 #

给泛型T设置默认值void，允许无payload的调用，同时保留类型约束：

export const createAction = <T = void>(type: string, error: boolean = false) => 
  (payload?: T, meta?: any): { 
    type: string; 
    payload?: T; 
    meta?: any; 
    error: boolean; 
  } => ({ type, payload, meta, error });

2. 完善createApiAction的类型定义 #

让它为每个API阶段生成独立的泛型action创建器，适配不同的payload类型：

// 定义API action创建器的类型结构，支持自定义各阶段payload类型
type ApiActionCreators<RequestPayload = void, SuccessPayload = void, FailurePayload = Error> = {
  request: (payload?: RequestPayload, meta?: any) => ReturnType<typeof createAction<RequestPayload>>;
  success: (payload?: SuccessPayload, meta?: any) => ReturnType<typeof createAction<SuccessPayload>>;
  failure: (payload?: FailurePayload, meta?: any) => ReturnType<typeof createAction<FailurePayload>>;
};

// 实现createApiAction，接收action类型常量并返回对应的创建器
export const createApiAction = <
  T extends { REQUEST: string; SUCCESS: string; FAILURE: string },
  RequestPayload = void,
  SuccessPayload = void,
  FailurePayload = Error
>(
  actionTypes: T
): ApiActionCreators<RequestPayload, SuccessPayload, FailurePayload> => ({
  request: createAction<RequestPayload>(actionTypes.REQUEST),
  success: createAction<SuccessPayload>(actionTypes.SUCCESS),
  failure: createAction<FailurePayload>(actionTypes.FAILURE, true),
});

3. 使用示例 #

现在你可以根据实际业务需求指定各阶段的payload类型，或者直接使用默认值：

// 定义你的API action类型常量
const DEFAULT_API = {
  REQUEST: 'form/REQUEST',
  SUCCESS: 'form/SUCCESS',
  FAILURE: 'form/FAILURE',
} as const;

// 自定义各阶段的payload类型（可选，按需定义）
type FormRequestPayload = { formId: string };
type FormSuccessPayload = { formData: Record<string, any> };
type ApiError = { code: number; message: string };

// 创建带类型约束的API action创建器
const defaultAPIAction = createApiAction<typeof DEFAULT_API, FormRequestPayload, FormSuccessPayload, ApiError>(DEFAULT_API);

// 现在调用时会有完整的类型提示：
defaultAPIAction.request({ formId: '123' }); // 符合RequestPayload类型
defaultAPIAction.success({ formData: { name: 'test' } }); // 符合SuccessPayload类型
defaultAPIAction.failure({ code: 400, message: 'Invalid form' }); // 符合FailurePayload类型
// 也可以不传payload（当类型为void时）
defaultAPIAction.request();

为什么这样能解决问题？ #

• 泛型默认值void允许无payload的action调用，解决了request()无参数时的报错
• 为API的三个阶段分别指定泛型，保证了每个action的payload类型独立且安全
• 完整的类型定义让TypeScript能提供准确的代码提示和类型检查

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