带状态的React组件如何使用dispatch？求Redux+Hooks的正确实现方式

首先说明你现有代码的核心问题：React Hooks 仅支持在函数组件或自定义 Hook 的顶层调用，你在类组件 constructor 中调用 useDispatch 属于非法用法，自然无法正常获取 dispatch 方法。结合 Redux Hooks 实现需求的话，直接将 IndividualValue 重构为函数组件即可，具体实现如下：

重构后的 IndividualValue 组件 #

import { useState, useEffect } from 'react'
import { useDispatch } from 'react-redux'
import axios from 'axios'
// 引入你定义的累加action
import { incrementTotalByValue } from '你的action文件路径'

function IndividualValue(props) {
  // 替代类组件的state
  const [value, setValue] = useState(0)
  // 顶层调用useDispatch获取dispatch方法
  const dispatch = useDispatch()

  // 空依赖数组的useEffect等效于类组件的componentDidMount
  useEffect(() => {
    const fetchValue = async () => {
      // 你的原代码缺失await，这里必须加否则无法拿到异步返回结果
      const res = await axios.get(`api/${props.name}`)
      const currentValue = res.data.value
      setValue(currentValue)
      // 调用dispatch更新总和
      dispatch(incrementTotalByValue(currentValue))
    }
    fetchValue()
  }, [props.name, dispatch])

  return (
    <div>{props.name} = {value}</div>
  )
}

其他组件调整说明 #

你现有的 TotalValues 组件写法完全符合 Redux Hooks 规范，无需修改；入口的 Provider 包裹逻辑也不需要改动，直接替换原类组件 IndividualValue 即可正常运行。

额外注意项 #

• 所有 React Hooks 都不能在类组件中使用，如果你想保留类组件写法，还是需要用 connect 高阶组件注入 dispatch
• 异步请求必须加 await 或用 .then() 处理回调，直接取返回值会得到 Promise 实例而非接口数据
• useEffect 依赖项需要声明所有用到的外层变量，dispatch 是 React Redux 内部封装的稳定引用，不会触发多余的副作用执行

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