Next.js集成Redux报错：TypeError: Cannot read properties of undefined (reading 'getState')

错误根源 #

你在pages/_app.js中错误地从@reduxjs/toolkit包导入了store，但这个包本身并没有导出你需要的store实例——你的store是自己在pages/app/store.js中创建的，错误的导入导致Provider接收的store参数为undefined，最终触发了getState读取失败的错误。

修复步骤 #

修改pages/_app.js中的store导入语句，将路径指向你本地创建的store文件：

修正后的pages/_app.js代码

import '../styles/globals.css'
import { Provider } from 'react-redux';
// 替换为本地store的正确相对路径
import { store } from './app/store';

function MyApp({ Component, pageProps }) {
  return (
    <Provider store={store}>
      <Component {...pageProps} />
    </Provider>
  )
}

export default MyApp;

验证说明 #

修正导入路径后，Provider会正确接收你配置好的Redux store实例，此时useSelector就能正常读取counter状态，和你在纯React项目中的运行逻辑一致，无需改动其他代码。

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