如何在Next.js和类组件中使用react-redux，解决找不到store报错

问题根因 #

你报错的核心原因是CounterDisplay组件中connect高阶组件的导入路径错误：

// 错误的导入方式，读取的是react-redux内部私有路径的connect
import connect from 'react-redux/lib/connect/connect';

从内部私有路径导入的connect和_app.js里从公开入口导入的Provider使用的不是同一个Redux上下文实例，哪怕你外层已经包裹了Provider，connect也无法读取到对应上下文里的store实例，所以触发了找不到store的报错。

修复方案 #

直接把CounterDisplay中的connect导入语句改成从react-redux公开入口导入即可：

// components/CounterDisplay.js 修正后的导入写法
import { connect } from 'react-redux';

修改后重新启动项目就能正常从store中拿到count值渲染。

可选排查点 #

如果修改导入路径后仍然报错，可以检查项目依赖中是否安装了多个版本的react-redux，多版本共存也会导致上下文实例不匹配的问题。

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