简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

Home  >  Q&A  >  body text

Fix Next.js 13 error: Missing react-redux context; please wrap component within <Provider>

<p>I want to use data from redux but can't solve this error. So, I have an application router in next.js 13 and I want to access my page on /settings/account. This is my file structure: </p> <pre class="brush:php;toolbar:false;">--app --settings layout.jsx page.jsx --account page.jsx layout.jsx</pre> <p>I want to access user data on the account page:</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>But I got the error:<em>Error: could not find react-redux context value; please ensure the component is wrapped in a Provider</em>. I thought using a layout to wrap the page would solve the problem, so I did this: </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>Unfortunately, this doesn't help. The layout of the settings/account page and the settings page are the same, just with a different name - SettingsLayout (I thought the root layout would solve this problem). As for the settings page, it just contains plain HTML, no code. How can I solve this problem without wrapping the <code>App</code> component? </p>
P粉269847997P粉269847997452 days ago464

reply all(1)I'll reply

  • P粉515066518

    P粉5150665182023-08-17 11:47:45

    This is a tested method;

    Add a new file named redux-provider.js under your application folder

    "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>
    );
}

    Add another file named provider.tsx under your application folder and implement ReduxProvider

    "use client";

import { PropsWithChildren } from "react";

import ReduxProvider from "./redux-provider";

export default function Providers({ children }: PropsWithChildren<any>) {
    return (
        <ReduxProvider>
            {children}
        </ReduxProvider>
    );
}

    Implement Providers

    in your layout.tsx file (a direct subcomponent of the application folder) 
    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>
    );
}

    Now we can access the store from other pages.

    renew

    Yes. but! Wrapping the root component in a ReduxProvider does not mean that all other components are client components. You can still have server components. How to do it?

    Add a new folder named experimental under your application folder, and then add a new file named page.tsx under the experimental folder. You can import the contents of the page.tsx file from another file.

    /experimental/page.tsx

    import HomePage from "../index"; // 这是一个在其中使用redux的客户端组件

export default async function Page() { // 这是一个服务器组件
    return <HomePage />;
}

    reply
    0
  • Cancelreply