Correction de l'erreur Next.js 13 : contexte de réaction-redux manquant ; veuillez envelopper le composant dans <Provider>
P粉269847997
2023-08-16 15:42:17
<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>
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
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 />; }