使用TypeScript连接Redux时出现dispatch属性不存在的类型错误

这个问题我太熟悉了！当你用connect()包裹组件时，TypeScript没办法自动识别Redux注入的dispatch属性，因为你的组件Props类型里没声明它。下面给你几个清晰可行的解决方案，按推荐程度排序：

方案一：用mapDispatchToProps绑定Action Creators（最推荐，类型最安全） #

这种方式不需要直接操作dispatch，而是把你的action creator直接作为props注入组件，TypeScript能自动推断类型，代码也更简洁：

import * as React from 'react';
import { connect, ConnectedProps } from 'react-redux';
import { handleInitialData } from '../../actions/shared';

// 把需要的action creators直接传入mapDispatchToProps
const mapDispatch = {
  handleInitialData,
};

// 自动生成connect注入后的Props类型
type AppProps = ConnectedProps<typeof connector>;

const App: React.FC<AppProps> = ({ handleInitialData }) => {
  React.useEffect(() => {
    // 直接调用注入的方法，不需要手动dispatch
    handleInitialData();
  }, [handleInitialData]);

  // ... 你的组件其他逻辑
};

const connector = connect(null, mapDispatch);
export default connector(App);

方案二：显式声明Props包含Dispatch类型 #

如果你还是想直接用dispatch，可以给组件Props添加Redux的Dispatch类型：

import * as React from 'react';
import { connect } from 'react-redux';
import { Dispatch } from 'redux';
import { handleInitialData } from '../../actions/shared';

// 定义组件Props，包含自定义属性+dispatch
type AppProps = {
  // 这里可以添加你的组件自有props（如果有的话）
} & {
  dispatch: Dispatch;
};

const App: React.FC<AppProps> = (props) => {
  React.useEffect(() => {
    props.dispatch(handleInitialData());
  }, [props.dispatch]);

  // ... 你的组件其他逻辑
};

export default connect()(App);

方案三：改用useDispatch Hook（现代函数组件首选） #

如果你用的是React-Redux v7.1+，完全可以抛弃connect，用更简洁的Hooks方式：

import * as React from 'react';
import { useDispatch } from 'react-redux';
import { handleInitialData } from '../../actions/shared';

const App: React.FC = () => {
  const dispatch = useDispatch();

  React.useEffect(() => {
    dispatch(handleInitialData());
  }, [dispatch]);

  // ... 你的组件其他逻辑
};

export default App;

为什么会报错？ #

默认情况下，React.FC的默认Props类型是Readonly<{ children?: ReactNode; }> & Readonly<{}>，只包含children属性。connect()虽然会隐式注入dispatch，但TypeScript没有办法自动推断这个注入的属性，所以必须通过上面的方式显式声明类型。

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