我如何在 Next.js 13 中使用 Redux

Question

我目前正在將 Next JS 13 與 Redux 一起使用。在 Next.js 12 我可以將我的整個應用程序與Provider包裝在./pages/_app中，但是我如何使用 Next JS 13 進行包裝？

下面是我的layout.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>
  );
}

Answer 1

https://beta.nextjs.org/docs/rendering/server-and-client-components#rendering-third-party-context-providers-in-server-components

創建提供者組件並添加提供者。

 // app/providers.js 'use client'; import { ThemeProvider } from 'acme-theme'; import { AuthProvider } from 'acme-auth'; export function Providers({ children }) { return ( <ThemeProvider> <AuthProvider> {children} </AuthProvider> </ThemeProvider> ); }

將提供程序插入 RootLayaut。

 import { Providers } from './providers'; export default function RootLayout({ children }) { return ( <html> <body> <Providers>{children}</Providers> </body> </html> ); }

我如何在 Next.js 13 中使用 Redux

問題描述

1 個解決方案

解決方案1
0 2023-02-01 15:23:35

我如何在 Next.js 13 中使用 Redux

問題描述

1 個解決方案

解決方案1 0 2023-02-01 15:23:35

解決方案1
0 2023-02-01 15:23:35