Erkunden des Zustandsmanagements in React mit Jotai: Ein praktischer Leitfaden

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 ist Jotai eine minimale Zustandsverwaltungsbibliothek, die zur Verwaltung unabhängige Zustandseinheiten namens Atome nutzt Zustand, eliminiert Herausforderungen wie Propellerbohrungen und ermöglicht eine einfachere und skalierbarere Zustandsverwaltung Ansatz.

Was ist Jotai und wie funktioniert es?

Jotai ist eine Zustandsverwaltungsbibliothek, die im Gegensatz zu komplexeren Alternativen wie Redux eine einfache Zustandsverwaltungslö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 sie useAtom. Hier ist ein einfaches Beispiel für die Erstellung eines Jotai-Atoms:

importieren { Atom } aus'jotai';
const countAtom = Atom(1);

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

Hier ist ein Beispiel, um die Verwendung zu demonstrieren:

importieren { useAtom } aus'jotai';
const countAtom = Atom(1);
FunktionMeineKomponente() {
const [count, setCount] = useAtom (countAtom);
const Inkrement = () => setCount((prevCount) => prevCount + 1);
zurückkehren (


Anzahl: {count}</p>
Inkrementieren</button>
 </div>
 );
}

In diesem Beispiel ist die useAtom Der Haken dient zum Zugriff auf countAtom Atom und sein damit verbundener Wert. Der setCount Die 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.

Zustandsverwaltung in Reaktion mit Jotai

Um zu beginnen, Erstellen Sie eine React-Anwendung. Alternativ können Sie Nutzen Sie Vite, um ein React-Projekt einzurichten. Sobald Sie das Gerüst für eine grundlegende React-Anwendung erstellt haben, installieren Sie Jotai in Ihrer Anwendung.

npm install jotai

Um Jotai in Ihrer Anwendung nutzen zu können, müssen Sie als Nächstes Ihre gesamte App mit umschließen Anbieter 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ßen Anbietererhalten alle Komponenten in der Anwendung Zugriff auf die von Ihnen definierten Atome und können dann mit ihnen interagieren und den Status über die aktualisieren useAtom Haken.

importieren { Anbieter } aus„jotai“;

Wickeln Sie nun die Anwendung in die index.js oder main.jsx Wie nachfolgend dargestellt.

importieren Reagieren aus'reagieren'
importieren ReactDOM aus'react-dom/client'
importieren App aus'./App.jsx'
importieren'./index.css'
importieren { Anbieter } aus„jotai“;
ReactDOM.createRoot(dokumentieren.getElementById('Wurzel')).machen(



 </Provider>
 </React.StrictMode>,
)

Konfigurieren Sie einen Datenspeicher

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. Im src Verzeichnis, erstellen TodoStore.jsx Datei und fügen Sie den folgenden Code hinzu.

importieren { Atom } aus„jotai“;
Exportconst TodosAtom = atom([]);

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

Implementieren Sie die To-Do-Anwendungsfunktionalität

Nachdem Sie Jotai nun in der React-Anwendung konfiguriert und ein Atom zum Verwalten des Anwendungsstatus erstellt haben, können Sie loslegen Gehen Sie voran und erstellen Sie eine einfache Aufgabenkomponente, die die Funktionen zum Hinzufügen, Löschen und Bearbeiten der Aufgabe übernimmt Artikel.

Erstelle eine neue Komponenten/Todo.jsx Datei in der src Verzeichnis. Fügen Sie in dieser Datei den folgenden Code hinzu:

1. Importieren Sie den Datenspeicher und die useAtom Haken.

   importieren Reagieren, { useState } aus'reagieren';
   importieren { TodosAtom } aus'../TodoStore';
   importieren { useAtom } aus'jotai';

2. Erstellen Sie die Funktionskomponente und fügen Sie die JSX-Elemente hinzu.

   const Todo = () => {
   
   zurückkehren (
   
   
    Platzhalter=„Neue Aufgaben“
    Wert={Wert}
    onChange={event => setValue (event.target.value)}
    />
   Todo hinzufügen</button>
   
   
    {todos.map(machen => (
   
   
    {todo.text}
    handleDelete (todo.id)}>Löschen</button>
    </li>
    ))}
    </ul>
    </div>
    );
   };