Nachricht

Dec 04, 2023

Erkunden des Zustandsmanagements in React mit Jotai: Ein praktischer Leitfaden

Verbessern Sie die Zustandsverwaltung Ihrer React-App mit Jotai: eine einfachere Alternative zu Redux und perfekt für kleinere Projekte! Die Statusverwaltung in kleinen Projekten ist mit React im Allgemeinen unkompliziert

Verbessern Sie die Zustandsverwaltung Ihrer React-App mit Jotai: eine einfachere Alternative zu Redux und perfekt für kleinere Projekte!

Die Verwaltung des Status in kleinen Projekten ist im Allgemeinen mithilfe von React-Hooks und -Requisiten unkompliziert. Wenn jedoch die Anwendung wächst und die Notwendigkeit entsteht, Daten über verschiedene Komponenten hinweg gemeinsam zu nutzen und darauf zuzugreifen, führt dies häufig zu Propellerbohrungen. Leider kann Prop-Drilling die Codebasis schnell überladen und zu Skalierbarkeitsproblemen führen.

Während Redux eine großartige Zustandsverwaltungslösung bietet, kann seine API für relativ kleine Projekte überwältigend sein. Im Gegensatz dazu eliminiert Jotai, eine minimale Zustandsverwaltungsbibliothek, die unabhängige Zustandseinheiten, sogenannte Atome, zur Zustandsverwaltung nutzt, Herausforderungen wie Prop Drilling und ermöglicht einen einfacheren und skalierbareren Zustandsverwaltungsansatz.

Jotai ist eine State-Management-Bibliothek, die im Gegensatz zu komplexeren Alternativen wie Redux eine einfache State-Management-Lösung bietet. Es nutzt unabhängige Zustandseinheiten, sogenannte Atome, um den Zustand in der React-Anwendung zu verwalten.

Im Idealfall greifen verschiedene Komponenten in der Anwendung über einen von Jotai bereitgestellten Hook namens „ auf diese Atome zu und aktualisieren sieuseAtom . Hier ist ein einfaches Beispiel für die Erstellung eines Jotai-Atoms:

Um in Jotai auf Atome zuzugreifen und mit ihnen zu arbeiten, können Sie einfach verwendenuseAtomHook, der Ihnen wie andere React-Hooks den Zugriff und die Aktualisierung des Werts eines Zustands innerhalb einer Funktionskomponente ermöglicht.

Hier ist ein Beispiel, um die Verwendung zu demonstrieren:

In diesem Beispiel ist dieuseAtomDer Haken dient zum Zugriff aufcountAtom Atom und sein damit verbundener Wert. DersetCountDie Funktion wird verwendet, um den Wert des Atoms zu aktualisieren, und alle zugehörigen Komponenten werden automatisch mit dem aktualisierten Wert neu gerendert.

Dadurch, dass nur die betroffenen Komponenten ausgelöst werden, werden unnötige erneute Renderings in der gesamten Anwendung reduziert. Dieser gezielte Ansatz zum erneuten Rendern verbessert die Gesamtleistung der Anwendung.

Nachdem wir die Grundlagen geklärt haben, erstellen wir eine einfache To-do-React-App, um die Zustandsverwaltungsfunktionen von Jotai besser zu verstehen.

Den Quellcode dieses Projekts finden Sie in diesem GitHub-Repository.

Erstellen Sie zunächst eine React-Anwendung. Alternativ können Sie Vite verwenden, um ein React-Projekt einzurichten. Sobald Sie das Gerüst für eine grundlegende React-Anwendung erstellt haben, installieren Sie Jotai in Ihrer Anwendung.

Um Jotai in Ihrer Anwendung nutzen zu können, müssen Sie als Nächstes Ihre gesamte App mit umschließenAnbieter Komponente. Diese Komponente enthält den Speicher, der als zentraler Knotenpunkt für die Bereitstellung von Atomwerten in der gesamten Anwendung dient.

Darüber hinaus können Sie damit den Anfangszustand von Atomen angeben. Indem Sie Ihre App mit dem umschließenAnbietererhalten alle Komponenten in der Anwendung Zugriff auf die von Ihnen definierten Atome und können dann mit ihnen interagieren und den Status über die aktualisierenuseAtomHaken.

Wickeln Sie nun die Anwendung in dieindex.jsodermain.jsxWie nachfolgend dargestellt.

Der Store fungiert als zentrales Repository für den Anwendungsstatus. Es enthält typischerweise die Definition von Atomen, Selektoren und anderen zugehörigen Funktionen, die für die Zustandsverwaltung mit Jotai erforderlich sind.

In diesem Fall verwaltet es die Atome zum Verwalten der Liste der Elemente für die To-do-Anwendung. ImsrcVerzeichnis, erstellenTodoStore.jsxDatei und fügen Sie den folgenden Code hinzu.

Durch das Erstellen und Exportieren derTodosAtomkönnen Sie bequem über verschiedene Komponenten in der Anwendung hinweg interagieren und den To-Do-Status aktualisieren.

Nachdem Sie Jotai nun in der React-Anwendung konfiguriert und ein Atom zum Verwalten des Anwendungsstatus erstellt haben, erstellen Sie nun eine einfache To-Do-Komponente, die die Funktionen zum Hinzufügen, Löschen und Bearbeiten der To-Do-Elemente übernimmt.

Erstelle eine neueKomponenten/Todo.jsxDatei in dersrc Verzeichnis. Fügen Sie in dieser Datei den folgenden Code hinzu:

DerhandleAdd Die Funktion ist für das Hinzufügen eines neuen Aufgabenelements zur Liste der Elemente verantwortlich. Zunächst wird geprüft, ob der Wert der Variablen nicht leer ist. Anschließend wird ein neuer Aufgabeneintrag mit einer eindeutigen ID und dem eingegebenen Aufgabeneintrag als Inhalt erstellt.

DersetTodos Anschließend wird die Funktion aufgerufen, um die Liste der Aufgaben im Atom durch Anhängen des neuen Elements zu aktualisieren. Schließlich dieWertstate wird nach der Additionsoperation auf eine leere Zeichenfolge zurückgesetzt.

Andererseits ist diehandleDelete Die Funktion ist für das Entfernen eines Aufgabenelements aus der Liste verantwortlich. Es filtert das Aufgabenelement mithilfe der angegebenen ID aus der vorhandenen Liste heraus, indem es das verwendetprevTodos.filter Methode. Anschließend wird die Liste mithilfe von aktualisiertsetTodosFunktion – löscht effektiv das angegebene Aufgabenelement aus der Liste.

Dieser Leitfaden bietet eine Einführung in die Verwendung von Jotai als Zustandsverwaltungslösung. Nichtsdestotrotz gibt es noch andere großartige Funktionen, wie zum Beispiel die Möglichkeit, asynchrone Atome zu erstellen, die speziell für die Zustandsverwaltung entwickelt wurden, die asynchrone Vorgänge wie API-Aufrufe umfasst.

Darüber hinaus können Sie auch abgeleitete Atome erstellen, die zum Berechnen und Ableiten von Werten aus vorhandenen Atomen verwendet werden, sodass Sie komplexe Zustände basierend auf anderen Teilen der Anwendung verwalten können.

Durch die Nutzung dieser Statusverwaltungsfunktionen können Sie robustere und skalierbarere React-Anwendungen erstellen.

Gichuhi Wachira hat einen Bachelor of Science in Informatik und arbeitet als Frontend-Entwickler und technischer Autor mit über zwei Jahren Erfahrung als Autor. Er schreibt für MUO über verschiedene Web- und Cloud-Technologien sowie Programmierkonzepte. Neben dem Schreiben oder dem Tüfteln an neuen Technologien verbringt er seine Zeit draußen.