如何在Next.js 13中使用Redux？适配Provider全局包裹应用的方法

你当前的layout.js写法完全正确，Next.js 13（App Router）就是通过根布局RootLayout来实现全局组件包裹，替代Next.js 12中pages/_app.js的作用。

核心逻辑说明 #

App Router模式下，app/layout.js是应用的根布局，所有页面都会作为children嵌套进这个布局。将Redux的Provider放在这里，就能让整个应用的所有组件都能访问Redux store。

额外注意事项 #

• Server Components 限制：Redux属于客户端状态管理，只能在Client Components中使用。如果你的Header、Drawer等组件用到了useSelector或useDispatch，需要在这些组件顶部添加'use client'指令。
• Store配置规范：确保你的Redux store使用@reduxjs/toolkit的configureStore创建，而非旧版的createStore，这能避免SSR场景下的状态不一致问题。
• 标签层级正确：你当前的写法中Provider嵌套在body内部，没有包裹html或body标签，这是符合Next.js规范的，不要调整这个层级。

你的代码（已格式化） #

import "../styles/globals.css";
import BottomBar from "./BottomBar";
import Drawer from "./Drawer";
import Header from "./Header";
import { store } from "../store";
import { Provider } from "react-redux";

export default function RootLayout({ children }) {
  return (
    <html>
      <head />
      <body>
        <Provider store={store}>
          <Header />
          <Drawer />
          {children}
          <BottomBar />
        </Provider>
      </body>
    </html>
  );
}

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