Next.js 13.4集成Redux Toolkit报错：未找到react-redux上下文值

问题根源 #

Next.js 13.4的App Router默认所有组件都是服务器组件，而Redux的useSelector、useDispatch这类钩子只能在客户端组件中运行。你的page.js没有声明为客户端组件，导致它在服务器端渲染时无法访问Redux Provider提供的上下文，从而抛出错误。

解决方案 #

在page.js的最顶部添加'use client'指令，将其标记为客户端组件：

修改后的page.js代码：

'use client'; // 新增这一行

import { addBalance, cutBalance } from "./redux/features/balance/balanceSlice";
import { useSelector, useDispatch } from 'react-redux'

export default function Home() {
  const balance = useSelector((state) => state.balance.value)
  const dispatch = useDispatch()
  
  return (
    <>
      {balance}
    </>
  );
}

额外确认点 #

• 你的Providers组件已正确添加'use client'，且在RootLayout中完成了全局包裹，这部分配置无需调整。
• store.js中configureStore的reducer注册逻辑正确，无需修改。

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