如何为Redux Toolkit的createAction设置泛型实现参数严格类型校验

AI 小北

2026-10-7

解决方案

Redux Toolkit 原生的 createAction 生成的 action creator 默认是固定类型的函数，不会自动携带泛型参数，你需要手动对生成的 action creator 做类型断言，将其声明为泛型函数即可实现你要的参数校验效果。

步骤1：定义泛型的 action creator 类型

你需要先定义一个匹配你入参泛型规则的 action creator 类型，示例如下：

import { createAction, createReducer, PayloadAction } from "@reduxjs/toolkit";
import { AssingValueType, AppState, AppliedFiltersType, PathValue } from "./types";

// 定义泛型action creator类型，约束入参的泛型规则
type UpdateAppliedFilterValueActionCreator = <
  Category extends keyof AppliedFiltersType,
  Key extends keyof PathValue<AppliedFiltersType, Category>
>(payload: AssingValueType<Category, Key>) => PayloadAction<AssingValueType<Category, Key>>;

步骤2：对createAction生成的实例做类型断言

将 createAction 返回的普通 action creator 断言为你上面定义的泛型类型：

export const updateAppliedFilterValue = createAction<AssingValueType>(
  "UPDATE_APPLIED_FILTER_VALUE"
) as UpdateAppliedFilterValueActionCreator;

步骤3：修正reducer中的赋值逻辑

你原有的reducer赋值逻辑存在错误，直接替换了整个category的filters对象，应该根据filterKey修改对应字段：

const initialState = {
  appliedFilters: {
    cars: {
      arrayType: [],
      objectType: []
    },
    ships: {}
  }
} as AppState;

const reducerCreator = createReducer(initialState, (builder) => {
  builder.addCase(updateAppliedFilterValue, (state, action) => {
    const { category, filterKey, value } = action.payload;
    state.appliedFilters[category][filterKey] = value;
  });
});

export default reducerCreator;

效果验证

修改完成后TS会自动对action调用做严格校验：

合法调用示例：updateAppliedFilterValue({category: 'cars', filterKey: 'arrayType', value: ['a', 'b']}) 无类型报错
非法调用示例：updateAppliedFilterValue({category: 'car', filterKey: 1, value: 3}) 会触发多维度的报错：
- category值car不属于合法的cars/ships枚举
- cars分类的filterKey只能是arrayType/objectType，不能是数字1
- value类型和对应字段声明的类型不匹配

内容的提问来源于stack exchange，提问作者Susitha Ravinda Senarath