首次集成Redux报错：Undefined is not a function（Connect调用异常）

这个错误大概率是你在使用react-redux的connect方法时，出现了大小写错误、导入错误或者action creator未正确定义的问题，结合你首次集成Redux的情况，我给你梳理几个关键排查方向：

1. 检查connect的大小写和导入方式 #

JS是大小写敏感的，你错误信息里的(0, _reactRedux.Connect)用了大写的Connect，但react-redux导出的是小写的connect！这是新手最容易踩的坑。

• 正确的导入语句应该是：

  import { connect } from 'react-redux';
  

• 调用时也要用小写的connect，比如：

  export default connect(mapStateToProps, { userOpenedApp })(YourAppComponent);
  

2. 确认userOpenedApp action creator有效 #

确保你的userOpenedApp是一个正确定义并导出的action函数：

• 在你的actions文件里，要像这样定义并导出：

  // actions.js示例
  export const userOpenedApp = () => ({
    type: 'USER_OPENED_APP' // 替换成你的action类型
  });
  

• 在App.js里正确导入这个action，比如：

  import { userOpenedApp } from './path/to/actions';
  

  避免因路径错误或未导出导致userOpenedApp为undefined。

3. 验证依赖安装和版本 #

确保你已经正确安装了redux和react-redux：

# npm安装
npm install redux react-redux

# 或者yarn
yarn add redux react-redux

如果是react-redux v7+版本，connect依然可用，但如果是更新版本，也可以考虑使用useSelector和useDispatch的hooks写法，这是现在的推荐方案。

4. 检查connect的调用逻辑 #

connect的正确用法是先传入映射函数，再传入你的组件，比如：

// 定义state映射
const mapStateToProps = (state) => ({
  // 这里写你需要从state获取的属性
});

// 传入action creators
const mapDispatchToProps = {
  userOpenedApp
};

// 最后连接组件
export default connect(mapStateToProps, mapDispatchToProps)(YourAppComponent);

不要搞反调用顺序，也不要忘记最后传入你的组件。

从你提供的截图来看，优先检查connect的大小写问题，这应该是最可能的触发原因。

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