Next.js 13中Redux Provider未生效问题求助（非全局包裹App）

问题根源 #

你的account/page.jsx是默认的服务器组件，而useSelector是React-Redux的客户端钩子，只能在客户端组件中使用；同时你的account/layout.jsx存在语法问题（第一行多余的layout.jsx文本），导致客户端组件标识未生效。

修复步骤 #

1. 修正account/layout.jsx的语法问题
   确保"use client"是文件第一行，删除多余的无效文本：

   "use client"
   import { store } from "@/context/store";
   import { Provider } from "react-redux";
   
   export default function AccountLayout({ children }) {
       return (
           <Provider store={store}>
               {children}
           </Provider>
       )
   }
   

2. 将account/page.jsx转为客户端组件
   在account/page.jsx顶部添加"use client"指令，因为useSelector必须在客户端组件中调用：

   "use client"
   import React from 'react'
   import { useSelector } from 'react-redux';
   
   export default function AccountPage() {
       const {info: userInfo} = useSelector(state => state.user);
       const {name, id} = userInfo; 
       console.log(name, id)
   
       return (
           <div>page</div>
       )
   }
   

原理说明 #

• Next.js 13 App Router中组件默认是服务器组件，只有添加"use client"才会转为客户端组件，此时才能访问React上下文（包括Redux的Provider上下文）。
• account/layout.jsx作为客户端组件提供Redux上下文，其子组件account/page.jsx必须也是客户端组件，才能获取到上下文并正常使用useSelector。

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