在Next.js中配置Redux时出现TypeError错误求助

可能原因及对应解决方案 #

• 在Server Component中使用了react-redux Hooks
  Next.js 13 App Router默认组件是Server Component，而useSelector、useDispatch等react-redux Hooks只能在Client Component中运行。给所有使用这些Hooks的组件顶部加上'use client'指令即可：

  'use client'
  import { useSelector } from 'react-redux'
  
  export default function MyComponent() {
    const count = useSelector(state => state.counter.value)
    return <div>{count}</div>
  }
  

• react-redux版本兼容性问题
  你的react-redux@8.1.1可能和当前Next.js版本存在小版本兼容冲突，升级到最新稳定版：

  npm install react-redux@latest
  

• 依赖缓存异常
  清理现有依赖缓存并重新安装：

  rm -rf node_modules package-lock.json
  npm install
  npm run dev
  

• Redux Provider配置错误
  在App Router中，Redux Provider必须放在Client Component内。修改根layout文件，添加'use client'并包裹Provider：

  'use client'
  import { Provider } from 'react-redux'
  import store from './store'
  
  export default function RootLayout({ children }) {
    return (
      <html lang="zh-CN">
        <body>
          <Provider store={store}>{children}</Provider>
        </body>
      </html>
    )
  }
  

内容的提问来源于stack exchange，提问作者syed yaser mohasin