可以在React类组件中使用dispatch()吗？useDispatch调用报错如何解决

报错原因 #

useDispatch 是 React Redux 提供的专属 Hook，根据 React Hooks 调用规则，Hook 只能在函数组件、自定义 React Hook 中调用，类组件不符合调用规则，因此触发报错。

解决方案 #

方案1：保留类组件，使用 connect 注入的 dispatch #

你已经引入了 connect 高阶组件，当 connect 没有传入第二个参数 mapDispatchToProps 时，会默认将 dispatch 方法注入到组件的 props 中，直接取用即可，无需调用 useDispatch。同时你原有代码中 render 方法的点击事件绑定漏写了 this，也需要同步修正。
修改后完整代码：

import React from "react";
import { connect } from "react-redux";
import {toDo} from "../patials/user";

class SignUp extends React.Component {
  constructor(props) { 
    super(props);
    this.onHandle = this.onHandle.bind(this);
  }
  
 onHandle() {
   // 直接从props获取默认注入的dispatch
   this.props.dispatch(toDo());
 }
render() {
  return(
   <button onClick={this.onHandle}>Action</button>
  );
}
} 
export default connect()(SignUp)

方案2：改造为函数组件，使用 useDispatch #

如果不需要保留类组件写法，改造成函数组件后即可正常使用 useDispatch Hook，代码更简洁，也不需要使用 connect 高阶组件包裹。
修改后完整代码：

import React from "react";
import { useDispatch } from "react-redux";
import {toDo} from "../patials/user";

const SignUp = () => {
  const dispatch = useDispatch();

  const onHandle = () => {
    dispatch(toDo());
  }

  return <button onClick={onHandle}>Action</button>;
} 

export default SignUp;

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