简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Maison
Article
Questions et réponses
Cours
Sujet
Télécharger
Jeu
Dictionnaire
mises à jour récentes

Maison  >  Questions et réponses  >  le corps du texte

Correction de l'erreur Next.js 13 : contexte de réaction-redux manquant ; veuillez envelopper le composant dans <Provider>

<p>Je souhaite utiliser les données de Redux mais je ne parviens pas à résoudre cette erreur. J'ai donc un routeur d'application dans next.js 13 et je souhaite accéder à ma page sur /settings/account. Voici la structure de mes fichiers : </p> <pre class="brush:php;toolbar:false;">--app --paramètres mise en page.jsx page.jsx --compte page.jsx layout.jsx</pre> <p>Je souhaite accéder aux données utilisateur sur la page du compte :</p> <pre class="brush:php;toolbar:false;">importer React depuis 'react' importer { useSelector } depuis 'react-redux' ; exporter la fonction par défaut AccountPage() { const {info : userInfo} = useSelector(state => state.user); const {nom, identifiant} = userInfo ; console.log(nom, identifiant) retour ( <div>page</div> ) }</pré> <p>Mais j'ai eu l'erreur :<em>Erreur : impossible de trouver la valeur de contexte de réaction-redux ; veuillez vous assurer que le composant est enveloppé dans un fournisseur</em>. Je pensais qu'utiliser une mise en page pour envelopper la page résoudrait le problème, j'ai donc fait ceci : </p> <pre class="brush:php;toolbar:false;">layout.jsx "utiliser le client" importer {store} depuis "@/context/store" ; importer { Fournisseur } depuis "react-redux" ; exporter la fonction par défaut AccountLayout({ children }) { retour ( <Magasin du fournisseur={magasin}> {enfants} </Fournisseur> ) }</pré> <p>Malheureusement, cela n’aide pas. La disposition de la page des paramètres/compte et de la page des paramètres est la même, juste avec un nom différent - SettingsLayout (je pensais que la disposition racine résoudrait ce problème). Quant à la page des paramètres, elle contient simplement du HTML brut, pas de code. Comment puis-je résoudre ce problème sans envelopper le composant <code>App</code> </p>
P粉269847997P粉269847997402 Il y a quelques jours418

répondre à tous(1)je répondrai

  • P粉515066518

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

    Il s'agit d'une méthode testée ;

    Ajoutez un nouveau fichier appelé redux-provider.js sous votre dossier d'application

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

    Ajoutez un autre fichier appelé supplier.tsx sous votre dossier d'application et implémentez ReduxProvider

    "use client";

import { PropsWithChildren } from "react";

import ReduxProvider from "./redux-provider";

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

    Implémentez les fournisseurs dans votre fichier layout.tsx (sous-composant direct du dossier de l'application)

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

    Nous pouvons désormais accéder à la boutique depuis d'autres pages.

    Mise à jour

    Oui. mais! Encapsuler le composant racine dans un ReduxProvider ne signifie pas que tous les autres composants sont des composants clients. Vous pouvez toujours avoir des composants serveur. Comment faire?

    Ajoutez un nouveau dossier nommé expérimental sous votre dossier d'application, puis ajoutez un nouveau fichier nommé page.tsx sous le dossier expérimental. Vous pouvez importer le contenu du fichier page.tsx à partir d'un autre fichier.

    /experimental/page.tsx

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

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

    répondre
    0
  • Annulerrépondre