Die integrierte Kontext-API von React eignet sich perfekt für die Statusfreigabe. Erfahren Sie, wie Sie es mit der neuesten Version von Next.js verwenden.

Next.js bietet mehrere Ansätze zur Zustandsverwaltung. Während einige dieser Methoden die Installation neuer Bibliotheken erfordern, ist die Kontext-API von React integriert und bietet somit eine hervorragende Möglichkeit, externe Abhängigkeiten zu reduzieren.

Mit React Context können Sie Daten nahtlos durch verschiedene Teile Ihres Komponentenbaums leiten und eliminieren so den Aufwand des Prop-Drillings. Dies ist besonders nützlich, um den globalen Status zu verwalten, z. B. den Anmeldestatus des aktuellen Benutzers oder sein bevorzugtes Design.

Grundlegendes zur React Context API

Bevor Sie in den Code eintauchen, ist es wichtig, Folgendes zu tun Verstehen Sie, was die React Context API ist und welches Problem es anspricht.

Requisiten bieten eine effektive Methode zum Austausch von Daten zwischen Komponenten. Sie ermöglichen die Weitergabe von Daten von einer übergeordneten Komponente an ihre untergeordneten Komponenten.

instagram viewer

Dieser Ansatz ist nützlich, da er deutlich zeigt, welche Komponenten bestimmte Daten verwenden und wie diese Daten im Komponentenbaum nach unten fließen.

Allerdings treten Probleme auf, wenn Sie über tief verschachtelte Komponenten verfügen, die dieselben Requisiten nutzen müssen. Diese Situation kann zu Komplexität führen und möglicherweise zu kompliziertem Code führen, der schwieriger zu warten ist. Diese Probleme sind unter anderem die Nachteile des Propellerbohrens.

React Context löst diese Herausforderung, indem es eine zentralisierte Methode zum Erstellen und Verwenden von Daten bereitstellt, die global und komponentenübergreifend zugänglich sein müssen.

Es richtet einen Kontext ein, in dem diese Daten gespeichert werden, sodass Komponenten darauf zugreifen können. Dieser Ansatz hilft Ihnen, Ihre Codebasis zu strukturieren, um sicherzustellen, dass sie gut organisiert ist.

Den Code dieses Projekts finden Sie in seiner GitHub Repository.

Erste Schritte mit der Statusverwaltung in Next.js 13 mithilfe der React Context API

Mit den Serverkomponenten von Next.js können Sie Anwendungen erstellen, die das Beste aus beiden Welten nutzen: der Interaktivität clientseitiger Apps und den Leistungsvorteilen des Server-Renderings.

Next.js 13 implementiert Serverkomponenten im App Verzeichnis – das jetzt stabil ist – standardmäßig. Da jedoch alle Komponenten vom Server gerendert werden, kann es bei der Integration clientseitiger Bibliotheken oder APIs wie React Context zu Problemen kommen.

Um dies zu vermeiden, gibt es eine gute Lösung Client verwenden Flag, das Sie für Dateien festlegen können, die clientseitigen Code ausführen.

Erstellen Sie zunächst lokal ein Next.js 13-Projekt, indem Sie diesen Befehl in Ihrem Terminal ausführen:

npx create-next-app@latest next-context-api

Navigieren Sie nach dem Erstellen des Projekts zu dessen Verzeichnis:

cd next-context-api

Starten Sie dann den Entwicklungsserver:

npm run dev

Sobald Sie ein einfaches Next.js-Projekt eingerichtet haben, können Sie eine einfache To-Do-App erstellen, die die React Context API für die Statusverwaltung nutzt.

Erstellen Sie den Kontextanbieter

Die Kontextanbieterdatei dient als zentraler Knotenpunkt, an dem Sie den globalen Status definieren und verwalten, auf den Komponenten zugreifen müssen.

Erstellen Sie eine neue Datei, src/context/Todo.context.jsund füllen Sie es mit dem folgenden Code.

"use client"
import React, { createContext, useReducer } from"react";


const initialState = {
 todos: [],
};


const reducer = (state, action) => {
switch (action.type) {
case"ADD_TODO":
return { ...state, todos: [...state.todos, action.payload] };


case"DELETE_TODO":
return { ...state, todos: state.todos.filter((todo, index) =>
 index !== action.payload) };


case"EDIT_TODO":
const updatedTodos = state.todos.map((todo, index) =>
 index action.payload.index? action.payload.newTodo: todo);
return { ...state, todos: updatedTodos };


default:
return state;
 }
};


exportconst TodoContext = createContext({
 state: initialState,
 dispatch: () =>null,
});


exportconst TodoContextProvider = ({ children }) => {
const [state, dispatch] = useReducer(reducer, initialState);
return (

 {children}
 </TodoContext.Provider>
 );
};

Dieses React-Context-Setup definiert a TodoContext die zunächst den Status einer leeren To-Do-Liste für die App enthält.

Neben der Erstellung des Ausgangszustands umfasst diese Kontextkonfiguration Folgendes: Reduzierstück Funktion, die verschiedene Aktionstypen definiert. Diese Aktionstypen ändern den Status des Kontexts abhängig von den ausgelösten Aktionen. In diesem Fall umfassen die Aktionen das Hinzufügen, Löschen und Bearbeiten von Aufgaben.

Der TodoContextProvider Komponente bietet die TodoContext zu anderen Komponenten in der Anwendung. Diese Komponente benötigt zwei Requisiten: die Wert-Requisite, die den Anfangszustand des Kontexts darstellt, und die Reduzier-Requisite, die die Reduzierfunktion darstellt.

Wenn eine Komponente den TodoContext nutzt, kann sie auf den Status des Kontexts zugreifen und Aktionen zur Aktualisierung des Status auslösen.

Fügen Sie den Kontextanbieter zur Next.js-App hinzu

Um nun sicherzustellen, dass der Kontextanbieter im Stammverzeichnis Ihrer Next.js-Anwendung gerendert wird und alle Clientkomponenten darauf zugreifen können, müssen Sie den Kontext zur Stammlayoutkomponente der App hinzufügen.

Öffnen Sie dazu die src/app/layout.js Datei und umschließen Sie den untergeordneten Knoten wie folgt in der HTML-Vorlage mit dem Kontextanbieter:

import'./globals.css';
import { TodoContextProvider } from"@/context/Todo.context";
exportconst metadata = {
 title: "Create Next App",
 description: "Generated by create next app",
};
exportdefaultfunctionRootLayout({
 children
}) {
return (
"en">

{children}</TodoContextProvider>
 </body>
 </html>
 );
}

Erstellen Sie eine To-Do-Komponente

Erstellen Sie eine neue Datei, src/components/Todo.js, und fügen Sie den folgenden Code hinzu.

Beginnen Sie mit den folgenden Importen. Stellen Sie sicher, dass Sie Folgendes angeben Client verwenden Flag, um diese Komponente als clientseitige Komponente zu markieren.

"use client"
import { TodoContext } from"@/context/Todo.context";
import React, { useContext, useState } from"react";

Als nächstes definieren Sie die Funktionskomponente, einschließlich der JSX-Elemente, die im Browser gerendert werden.

exportdefaultfunctionTodo() {
return (
marginBottom: "4rem", textAlign: "center" }}>
Todos</h2>



 type="text"
 value={todoText}
 onChange={(e) => setTodoText(e.target.value)}
 style={{ marginBottom: 16}}
 placeholder="Enter a todo"
 />






    

     {state.todos.map((todo, index) => (
  • 

     {index editingIndex? (
     <>
     type="text"
     value={editedTodo}
     onChange={(e) => setEditedTodo(e.target.value)}
     />
    • 



 style={{ marginRight: 16}} 
 onClick={() => handleEditTodo(index, editedTodo)}
 >
 Save
 </button>
 </>
 ): (
 <>
 {todo}
 style={{ marginRight: 16}} 
 onClick={() => setEditingIndex(index)}
 >Edit</button>


 onClick={() => handleDeleteTodo(index)}
 >Delete</button>
 </>
 )}
 </li>
 ))}
 </ul>
 </div>
 );
}

Diese Funktionskomponente umfasst Eingabefelder zum Hinzufügen, Bearbeiten und Löschen von Aufgaben sowie entsprechende Schaltflächen. Es benutzt Bedingtes Rendering von React, um die Schaltflächen zum Bearbeiten und Löschen basierend auf dem Bearbeitungsindexwert anzuzeigen.

Definieren Sie abschließend die erforderlichen Zustandsvariablen und die erforderlichen Handlerfunktionen für jeden Aktionstyp. Fügen Sie innerhalb der Funktionskomponente den folgenden Code hinzu.

const { state, dispatch } = useContext(TodoContext);
const [todoText, setTodoText] = useState("");
const [editingIndex, setEditingIndex] = useState(-1);
const [editedTodo, setEditedTodo] = useState("");
const handleAddTodo = () => {
if (todoText.trim() !== "") {
 dispatch({ type: "ADD_TODO", payload: todoText });
 setTodoText("");
 }
 };


const handleDeleteTodo = (index) => {
 dispatch({ type: "DELETE_TODO", payload: index });
 };
const handleEditTodo = (index, newTodo) => {
 dispatch({ type: "EDIT_TODO", payload: { index, newTodo } });
 setEditingIndex(-1);
 setEditedTodo("");
 };

Diese Handlerfunktionen sind für das Hinzufügen, Löschen und Bearbeiten der Aufgaben eines Benutzers innerhalb des Kontextstatus zuständig.

Sie stellen sicher, dass, wenn ein Benutzer eine Aufgabe hinzufügt, löscht oder bearbeitet, die entsprechenden Aktionen an den Reduzierer des Kontexts gesendet werden, um den Status entsprechend zu aktualisieren.

Rendern Sie die To-Do-Komponente

Importieren Sie abschließend die To-Do-Komponente in die Seitenkomponente.

Öffnen Sie dazu die Datei „page.js“ im Verzeichnis „src/app“, löschen Sie den Boilerplate-Code „Next.js“ und fügen Sie den folgenden Code hinzu:

import styles from'./page.module.css'
import Todo from'../components/Todo'
exportdefaultfunctionHome() {
return (


 </main>
 )
}

Großartig! An diesem Punkt sollten Sie in der Lage sein, den Status in der To-do-Next.js-App mithilfe von React Context zu verwalten.

Verwenden der React Context API mit anderen Statusverwaltungstechnologien

Die React Context API ist eine großartige Lösung für die Zustandsverwaltung. Dennoch ist es möglich, es zusammen mit anderen Zustandsverwaltungsbibliotheken wie Redux zu verwenden. Dieser hybride Ansatz stellt sicher, dass Sie das beste Tool für verschiedene Teile Ihrer App verwenden, die Schlüsselrollen übernehmen.

Auf diese Weise können Sie die Vorteile verschiedener Zustandsverwaltungslösungen nutzen, um effiziente und wartbare Anwendungen zu erstellen.