如何不用mapDispatchToProps 通过useDispatch调用Redux action

适用场景：React函数组件 + React-Redux v7.1.0及以上版本（该版本正式支持useDispatch Hook）

具体步骤如下：

• 导入依赖与自定义action
  在需要触发状态更新的组件文件顶部，引入useDispatch Hook和你自己定义的setInfo action，注意根据你的项目目录调整action文件的相对路径：

  import { useDispatch } from 'react-redux';
  import { setInfo } from './redux/main/actions'; // 替换为你项目的实际文件路径
  

• 在组件顶层获取dispatch方法
  严格遵循React Hook调用规则，在函数组件的最外层作用域调用useDispatch拿到dispatch实例，不要把这行代码写在条件判断、循环、嵌套函数内部：

  const BusinessComponent = () => {
    // 组件顶层调用，不要放在后续的嵌套逻辑里
    const dispatch = useDispatch();
  
    // 其余组件逻辑...
  }
  

• 触发action时直接传入dispatch执行即可
  你定义的setInfo是redux-thunk规范的thunk action（返回值为接收dispatch作为入参的函数），需要触发状态更新时，直接把调用action生成的thunk函数传给dispatch就能正常执行，不需要额外做绑定：

  const BusinessComponent = () => {
    const dispatch = useDispatch();
  
    // 比如在事件回调里触发状态更新
    const handleLoadComplete = (pageData) => {
      // 传入要更新的业务数据，交给dispatch执行
      dispatch(setInfo(pageData))
    }
  
    return (
      <div>
        {/* 点击按钮时触发状态更新 */}
        <button onClick={() => handleLoadComplete({ loadStatus: true })}>
          标记页面加载完成
        </button>
      </div>
    )
  }
  

补充说明：如果是直接返回普通action对象的同步action，调用逻辑完全一致，直接dispatch(你的同步Action(参数))即可，不需要额外配置。这种写法完全不需要使用connect高阶组件，也不需要编写mapDispatchToProps做方法映射，是当前React-Redux函数组件的官方推荐写法。

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