P粉5150665182023-08-17 11:47:45
这是经过测试的方法;
在你的应用文件夹下添加一个名为redux-provider.js的新文件
"use client"; import { PropsWithChildren } from "react"; import { Provider } from "react-redux"; import { store } from "../store/store"; // 请调整路径 export default function ReduxProvider({ children }: PropsWithChildren<any>) { return ( <Provider store={store}> {children} </Provider> ); }
在你的应用文件夹下添加另一个名为provider.tsx的文件,并实现ReduxProvider
"use client"; import { PropsWithChildren } from "react"; import ReduxProvider from "./redux-provider"; export default function Providers({ children }: PropsWithChildren<any>) { return ( <ReduxProvider> {children} </ReduxProvider> ); }
在你的layout.tsx文件(应用文件夹的直接子组件)中实现Providers
import React from "react"; import Providers from './provider'; export default function RootLayout({ children, }: { children: React.ReactNode; }) { return ( <html lang="en"> <body> <Providers> {children} </Providers> </body> </html> ); }
现在我们可以从其他页面访问store。
更新
是的。但是!将根组件包装在ReduxProvider中并不意味着所有其他组件都是客户端组件。你仍然可以有服务器组件。如何做到?
在你的应用文件夹下添加一个名为experimental的新文件夹,然后在experimental文件夹下添加一个名为page.tsx的新文件。你可以从另一个文件中导入page.tsx文件的内容。
/experimental/page.tsx
import HomePage from "../index"; // 这是一个在其中使用redux的客户端组件 export default async function Page() { // 这是一个服务器组件 return <HomePage />; }