React+Redux项目中useDispatch报Object(...) is not a function错误求助

问题描述 #

开发基于React和Redux的仪表盘消息获取应用时，使用useDispatch钩子触发以下错误：

Uncaught TypeError: Object(...) is not a function

错误抛出点在useReduxContext中，注释掉useDispatch相关代码后应用可正常运行。已确认依赖为最新版本，控制台打印useDispatch得到其函数定义如下：

useDispatch() {
  const store = useStore(); // @ts-ignore

  return store.dispatch;
}

可能的解决方法 #

• 确保组件被Redux Provider包裹
  这个错误最常见的原因是Dashboard组件不在Redux的Provider范围内。useDispatch需要从React Context中获取Redux store，若组件未被Provider包裹，就会触发此类错误。请在根组件层级添加Provider配置，示例代码如下：

  import React from 'react';
  import ReactDOM from 'react-dom/client';
  import { Provider } from 'react-redux';
  import store from './store'; // 你的Redux store实例
  import Dashboard from './Dashboard';
  
  const root = ReactDOM.createRoot(document.getElementById('root'));
  root.render(
    <Provider store={store}>
      <Dashboard />
    </Provider>
  );
  

• 验证Redux与React-Redux版本兼容性
  即便依赖是最新版本，仍需确认redux和react-redux版本是否匹配。比如react-redux v8+需要搭配redux v4+使用，版本不兼容会导致钩子函数无法正常工作。可尝试删除依赖缓存后重新安装：

  rm -rf node_modules package-lock.json
  npm install
  

• 确认useDispatch的导入路径正确
  务必从react-redux而非redux或其他库导入useDispatch，错误示例：

  import { useDispatch } from 'redux'; // 错误
  

  正确写法：

  import { useDispatch } from 'react-redux'; // 正确
  

• 检查Redux Store是否正确初始化
  确认你的Redux store是通过configureStore（Redux Toolkit推荐方式）或createStore（传统方式）正确创建的，若store初始化失败，Provider无法提供有效实例，也会导致useDispatch报错。

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