首页  >  问答  >  正文

解决 Next.js 13 错误:缺少 react-redux 上下文;请将组件包裹在 <Provider> 内

<p>我想使用redux中的数据,但无法解决这个错误。所以,我在next.js 13中有一个应用程序路由器,我想在/settings/account上访问我的页面。这是我的文件结构:</p> <pre class="brush:php;toolbar:false;">--app --settings layout.jsx page.jsx --account page.jsx layout.jsx</pre> <p>我想在账户页面访问用户数据:</p> <pre class="brush:php;toolbar:false;">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> ) }</pre> <p>但是我得到了错误:<em>Error: could not find react-redux context value; please ensure the component is wrapped in a Provider</em>。我以为使用布局来包装页面会解决这个问题,所以我做了这个:</p> <pre class="brush:php;toolbar:false;">layout.jsx "use client" import { store } from "@/context/store"; import { Provider } from "react-redux"; export default function AccountLayout({ children }) { return ( <Provider store={store}> {children} </Provider> ) }</pre> <p>不幸的是,这没有帮助。settings/account页面和settings页面的布局是相同的,只是名称不同 - SettingsLayout(我以为根布局会解决这个问题)。至于settings页面,它只包含普通的HTML,没有代码。 如何在不包装<code>App</code>组件的情况下解决这个问题?</p>
P粉269847997P粉269847997452 天前466

全部回复(1)我来回复

  • P粉515066518

    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 />;
    }

    回复
    0
  • 取消回复