Bei der Verwaltung komplexer Zustände in einer Next-Anwendung kann es schnell knifflig werden. Traditionelle Haken wie useState Hilfe bei der staatlichen Verwaltung, stellen aber ein Problem des Propellerbohrens dar. Unter Prop Drilling versteht man die Weiterleitung von Daten oder Funktionen durch mehrere Komponenten.

Ein besserer Ansatz wäre, Ihre Statusverwaltungslogik von den Komponenten zu trennen und diese Status von überall in Ihrer Anwendung zu aktualisieren. Wir führen Sie durch die Verwendung der Kontext-API, während wir eine einfache Aufgabenlistenanwendung erstellen.

Bevor Sie mit Ihrer To-Do-Liste beginnen

Bevor Sie die To-Do-Listen-Anwendung erstellen können, benötigen Sie Folgendes:

  • Grundkenntnisse bzgl moderne JavaScript-Operatoren Und Der useState-Hook von React.
  • Ein Verständnis dafür, wie es geht Zerstören Sie Arrays und Objekte in JavaScript.
  • Knoten v16.8 oder höher auf Ihrem lokalen Computer installiert und damit vertraut Paketmanager wie npm oder Garn.

Das fertige Projekt finden Sie auf GitHub als Referenz und weitere Erkundung.

instagram viewer

Anwendungsstatus und -verwaltung verstehen

Der Anwendungsstatus bezieht sich auf den aktuellen Zustand einer Anwendung zu einem bestimmten Zeitpunkt. Dazu gehören Informationen, die die App kennt und verwaltet, wie etwa Benutzereingaben und Daten, die aus einer Datenbank oder einer API (Application Programming Interface) abgerufen werden.

Um den Anwendungsstatus zu verstehen, betrachten Sie die möglichen Status einer einfachen Gegenanwendung. Sie beinhalten:

  • Der Standardzustand wenn der Zähler auf Null steht.
  • Ein erhöhter Zustand wenn der Zähler um eins erhöht wird.
  • Ein verminderter Zustand wenn der Zähler um eins sinkt.
  • Ein Reset-Zustand wenn der Zähler in seinen Standardzustand zurückkehrt.

Eine React-Komponente kann Zustandsänderungen abonnieren. Wenn ein Benutzer mit einer solchen Komponente interagiert, können seine Aktionen – wie etwa das Klicken auf eine Schaltfläche – Aktualisierungen des Status verwalten.

Dieses Snippet zeigt eine einfache Zähleranwendung im Standardzustand, die den Status basierend auf Klickaktionen verwaltet:

const [counter, setCounter] = useState(0);
zurückkehren (

{Zähler}/h1>

Einrichtung und Installation

Das Repository des Projekts enthält zwei Zweige: Anlasser Und Kontext. Sie können den Starter-Zweig als Basis zum Erstellen des Projekts oder den Kontext-Zweig als Vorschau der endgültigen Demo verwenden.

Klonen der Starter-App

Die Starter-App stellt die Benutzeroberfläche bereit, die Sie für die endgültige App benötigen, sodass Sie sich auf die Implementierung der Kernlogik konzentrieren können. Öffnen Sie ein Terminal und führen Sie den folgenden Befehl aus, um den Starter-Zweig des Repositorys auf Ihren lokalen Computer zu klonen:

Idiot Klon -b Starter https://github.com/makeuseofcode/Next.js-CRUD-todo-app.git

Führen Sie im Projektverzeichnis den folgenden Befehl aus, um die Abhängigkeiten zu installieren und Ihren Entwicklungsserver zu starten:

Garn && Garnentw

Oder:

npm i && npm run dev

Wenn alles gut gelaufen ist, sollte die Benutzeroberfläche in Ihrem Browser angezeigt werden:

Implementierung der Logik

Die Kontext-API bietet eine Möglichkeit, Zustandsdaten komponentenübergreifend zu verwalten und auszutauschen, ohne dass manuelle Bohrarbeiten erforderlich sind.

Schritt 1: Kontext erstellen und exportieren

Ein... kreieren src/app/context Ordner, um die Kontextdatei zu speichern und das Projektverzeichnis gut organisiert zu halten. Erstellen Sie in diesem Ordner eine todo.context.jsx Datei, die die gesamte Kontextlogik für die Anwendung enthält.

Importieren Sie die createContext Funktion aus dem reagieren Öffnen Sie die Bibliothek, rufen Sie sie auf und speichern Sie das Ergebnis in einer Variablen:

importieren {createContext} aus"reagieren";
const TodoContext = createContext();

Als nächstes erstellen Sie eine benutzerdefinierte useTodoContext Haken, der zurückkehrt TodoContext in seiner nutzbaren Form.

Exportconst useTodoContext = () => useContext (TodoContext);

Schritt 2: Staaten erstellen und verwalten

Um die CRUD-Aktionen (Erstellen, Lesen, Aktualisieren, Löschen) der Anwendung auszuführen, müssen Sie die Status erstellen und sie mit verwalten Anbieter Komponente.

const TodoContextProvider = ({ Kinder }) => {
const [task, setTask] = useState("");
const [tasks, setTasks] = useState([]);
zurückkehren<TodoContext. AnbieterWert={{}}>{Kinder}TodoContext. Anbieter>;
};
ExportStandard TodoContextProvider;

Kurz vor dem zurückkehren Anweisung, erstellen Sie eine handleTodoInput Funktion, die ausgeführt wird, wenn der Benutzer eine Aufgabe eingibt. Diese Funktion aktualisiert dann die Aufgabe Zustand.

const handleTodoInput = (Eingang) => setTask (Eingabe);

Füge hinzu ein createTask Funktion, die ausgeführt wird, wenn ein Benutzer eine Aufgabe übermittelt. Diese Funktion aktualisiert die Aufgaben Status und weist der neuen Aufgabe eine zufällige ID zu.

const createTask = (e) => {
 e.preventDefault();
 setTasks([
 {
 Ausweis: Mathematik.trunc(Mathematik.willkürlich() * 1000 + 1),
 Aufgabe,
 },
 ...Aufgaben,
 ]);
 };

Erstelle ein updateTask Funktion, die durch die Abbildung abbildet Aufgaben Liste und aktualisiert die Aufgabe, deren ID mit der ID der angeklickten Aufgabe übereinstimmt.

const updateTask = (id, updateText) =>
 setTasks (tasks.map((T) => (t.id id? { ...T, Aufgabe: updateText }: t)));

Ein... kreieren deleteTask Funktion, die die aktualisiert Aufgaben Liste, sodass sie alle Aufgaben enthält, deren ID nicht mit dem angegebenen Parameter übereinstimmt.

const deleteTask = (Ausweis) => setTasks (tasks.filter((T) => t.id !== id));

Schritt 3: Fügen Sie dem Anbieter Zustände und Handler hinzu

Nachdem Sie die Zustände erstellt und Code zu deren Verwaltung geschrieben haben, müssen Sie diese Zustände und Handlerfunktionen dem zur Verfügung stellen Anbieter. Sie können sie in Form eines Objekts bereitstellen, indem Sie die verwenden Wert Eigentum der Anbieter Komponente.

zurückkehren (
 Wert={{
 Aufgabe,
 Aufgaben,
 handleTodoInput,
 createTask,
 updateTask,
 deleteTask,
 }}
 >
 {Kinder}
 </TodoContext.Provider>
);

Schritt 4: Den Kontext eingrenzen

Der Anbieter Die von Ihnen erstellte Komponente muss die Komponente der obersten Ebene umschließen, um den Kontext für die gesamte Anwendung verfügbar zu machen. Bearbeiten Sie dazu src/app/page.jsx und wickeln Sie das ein Todos Komponente mit der TodoContextProvider Komponente:


;
</TodoContextProvider>;

Schritt 5: Verwenden Sie den Kontext in Komponenten

Bearbeiten Sie Ihre src/app/components/Todos.jsx archivieren und zerstören Aufgaben, Aufgabe, handleTodoInput, Und createTask über einen Anruf bei der useTodoContext Funktion.

const { task, task, handleTodoInput, createTask } = useTodoContext();

Aktualisieren Sie nun das Formularelement, um das Submit-Ereignis und Änderungen am Haupteingabefeld zu verarbeiten:

 createTask (e)}>
„Todo-Eingabe“ Typ="Text" Platzhalter=„Geben Sie eine Aufgabe ein“ erforderlicher Wert={task} onChange={(e) => handleTodoInput (e.target.value)} />
„submit-todo“ Typ="einreichen" Wert="Aufgabe hinzufügen" />
</form>

Schritt 6: Aufgaben in der Benutzeroberfläche rendern

Sie können jetzt mit der App eine Aufgabe erstellen und hinzufügen Aufgaben Liste. Um die Anzeige zu aktualisieren, müssen Sie die vorhandenen Karten durchsuchen Aufgaben und rendern Sie sie in der Benutzeroberfläche. Erstellen Sie zunächst eine src/app/components/Todo.jsx Komponente zum Speichern eines einzelnen Aufgabenelements.

Innerhalb der src/app/components/Todo.jsx Komponente, bearbeiten oder löschen Sie eine Aufgabe, indem Sie die aufrufen updateTask Und deleteTask Funktionen, die wir erstellt haben src/app/context/todo.context.jsx Datei.

importieren Reagieren, { useState } aus"reagieren";
importieren { useTodoContext } aus"../context/todo.context";
const Todo = ({ Aufgabe }) => {
const { updateTask, deleteTask } = useTodoContext();


// isEdit-Status verfolgt, wenn sich eine Aufgabe im Bearbeitungsmodus befindet
const [isEdit, setIsEdit] = useState(FALSCH);


zurückkehren (

„todo-wrapper“>


 {isEdit? ( <EingangTyp="Text"Wert={task.task}
 onChange={(e) => updateTask (task.id, e.target.value)} /> ):
 (<ThKlassenname="Aufgabe">{task.task}Th> )}



"Aktionen">






ExportStandard Machen;

Um das zu rendern src/app/components/Todo.jsx Komponente für jeden Aufgabe, geh hinein src/app/components/Todos.jsx Datei und bedingte Zuordnung durch die Aufgaben gleich nach dem Header schließendes Tag.

{Aufgaben && (

 {tasks.map((Aufgabe, d.h) => ( <MachenTaste={ich}Aufgabe={Aufgabe} /> ))}
</main>
)}

Testen Sie Ihre Anwendung in einem Browser und stellen Sie sicher, dass sie das erwartete Ergebnis liefert.

Aufgaben im lokalen Speicher speichern

Derzeit werden durch das Aktualisieren der Seite die Aufgaben zurückgesetzt und alle von Ihnen erstellten Aufgaben verworfen. Eine Möglichkeit, dieses Problem zu beheben, besteht darin, die Aufgaben im lokalen Speicher des Browsers zu speichern.

Die Webspeicher-API ist eine Verbesserung der Cookie-Speicherung mit Funktionen, die das Erlebnis für Benutzer und Entwickler gleichermaßen verbessern.