Redux-form中Dispatch函数的TypeScript类型标注问题求助

我最近也碰到过redux-form里这个dispatch类型标注的坑！确实，redux-form传给onSubmit的第二个dispatch参数，和原生Redux的Dispatch类型不是一回事——哪怕你乱标一个根本不存在的action类型，比如dispatch: Dispatch<{ foo: 'bar' }>，TypeScript也不会报错，这实在太闹心了。明明原生的Dispatch类型本来能好好做类型检查，到这儿就完全失效了。

问题根源 #

这是因为redux-form内部对dispatch做了一层封装，它并没有直接暴露原生Redux的严格Dispatch类型，而是用了一个非常宽泛的类型定义，导致TypeScript无法对派发的action做有效的约束校验。

可行的解决方案 #

1. 手动指定dispatch的正确Action类型

先在项目中定义好你的根Action类型，比如：

// 定义你项目中所有的action类型
type RootAction = 
  | { type: 'TODO_ADD'; payload: string }
  | { type: 'TODO_DELETE'; payload: number };

// 导出自定义的Dispatch类型
type AppDispatch = Dispatch<RootAction>;

然后在onSubmit里明确给dispatch标注这个类型：

const onSubmit = (values: YourFormValuesType, dispatch: AppDispatch) => {
  // 这里dispatch会严格检查你派发的action是否符合RootAction的定义
  dispatch({ type: 'TODO_ADD', payload: '买牛奶' });
  
  // 如果尝试派发一个不存在的action，TypeScript会直接报错
  // dispatch({ type: 'foo', payload: 'bar' }) // ❌ 类型错误
};

2. 借助redux-form内置类型（版本兼容时可用）

部分新版本的redux-form提供了FormDispatch这类内置类型，你可以结合自己的Action类型使用：

import { FormDispatch } from 'redux-form';

const onSubmit = (values: YourFormValuesType, dispatch: FormDispatch<RootAction>) => {
  // 同样能获得严格的类型校验
};

不过要注意，不同版本的redux-form类型定义可能有差异，如果找不到这个类型，还是用方案1更稳妥。

3. 直接使用Redux的useDispatch钩子（函数组件推荐）

如果你用的是函数组件，完全可以绕过redux-form提供的dispatch，直接用Redux的useDispatch钩子获取原生的dispatch：

import { useDispatch } from 'react-redux';

const TodoForm = () => {
  // 这里指定自定义的AppDispatch类型
  const dispatch = useDispatch<AppDispatch>();
  
  const onSubmit = (values: YourFormValuesType) => {
    // 直接用自己获取的dispatch，类型检查完全正常
    dispatch({ type: 'TODO_ADD', payload: values.todoContent });
  };

  return <Form onSubmit={onSubmit} {...otherFormProps} />;
};

这个方案我个人更推荐，因为它彻底避开了redux-form封装后的dispatch类型问题，同时也符合现代React+Redux的写法习惯。

额外提示 #

如果你的redux-form版本比较旧，类型定义本身就不完善，建议优先升级到较新的稳定版本，能减少不少类型相关的问题。

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