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

Question

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.js13 et je souhaite accéder à ma page sur /settings/account. Voici ma structure de fichiers : --app --settingslayout.jsxpage.jsx --accountpage.jsxlayout.jsx Je souhaite accéder aux données utilisateur dans la page du compte : importReactfrom'react'import{useSelecto

P粉515066518 · Answer

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) {
    return (
        
            {children}
        
    );
}

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) {
    return (
        
            {children}
        
    );
}

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 (
        
            
                
                    {children}
                
            
        
    );
}

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