Behebung des Next.js 13-Fehlers: Fehlender React-Redux-Kontext; bitte schließen Sie die Komponente in ein

Question

Ich möchte Daten von Redux verwenden, kann diesen Fehler jedoch nicht beheben. Ich habe also einen Anwendungsrouter in next.js13 und möchte unter /settings/account auf meine Seite zugreifen. Dies ist meine Dateistruktur: --app --settingslayout.jsxpage.jsx --accountpage.jsxlayout.jsx Ich möchte auf Benutzerdaten auf der Kontoseite zugreifen: importReactfrom'react'import{useSelecto

P粉515066518 · Answer

这是经过测试的方法；

在你的应用文件夹下添加一个名为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) {
    return (
        
            {children}
        
    );
}

在你的应用文件夹下添加另一个名为provider.tsx的文件，并实现ReduxProvider

"use client";

import { PropsWithChildren } from "react";

import ReduxProvider from "./redux-provider";

export default function Providers({ children }: PropsWithChildren) {
    return (
        
            {children}
        
    );
}

在你的layout.tsx文件（应用文件夹的直接子组件）中实现Providers

import React from "react";

import Providers from './provider';

export default function RootLayout({
   children,
}: {
    children: React.ReactNode;
}) {
    return (
        
            
                
                    {children}
                
            
        
    );
}

现在我们可以从其他页面访问store。

更新

是的。但是！将根组件包装在ReduxProvider中并不意味着所有其他组件都是客户端组件。你仍然可以有服务器组件。如何做到？

在你的应用文件夹下添加一个名为experimental的新文件夹，然后在experimental文件夹下添加一个名为page.tsx的新文件。你可以从另一个文件中导入page.tsx文件的内容。

/experimental/page.tsx

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

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

PHP8, ich komme auch

Lernen Sie das Website-Layout in 30 Minuten

Shangguan Oracle Video-Tutorial für Anfänger bis Fortgeschrittene

Ihre erste Zeile UNI-APP-Code

Flattern Sie von Grund auf bis zum App-Start

Brother Lian Neues Linux-Video-Tutorial

AXURE 9 Video-Tutorial (geeignet für die interaktive Produktdesign-Benutzeroberfläche von Product Manager)

Zero Basic Proficiency PS-Video-Tutorial

16-tägiges UI-Video-Tutorial für den Einstieg

PS-Techniken und Slicing-Techniken-Video-Tutorial

Video-Tutorial zum Bau und zur Projekteinführung der Alibaba Cloud-Umgebung

Überblick über Computernetzwerke – Grundkenntnisse, die Programmierer beherrschen müssen

Grundlegendes Tutorial für Programmierer – Erklärung des HTTP-Protokolls

Websocket-Video-Tutorial