Der Zustand macht die Reaktion zu einfach

React hat die Art und Weise, wie wir Benutzeroberflächen erstellen, revolutioniert, aber die Zustandsverwaltung bleibt eine Herausforderung. Herkömmliche State-Management-Lösungen wie Redux können komplex und langwierig sein. Es entstand Zustand, eine kleine, schnelle und erweiterbare Zustandsverwaltungsbibliothek, die die Zustandsverwaltung in React-Anwendungen zum Kinderspiel macht. In diesem Artikel wird untersucht, wie Zustand die Zustandsverwaltung vereinfacht und warum es bei Entwicklern eine beliebte Wahl ist. Wir stellen auch Beispiele für die Verwendung von TypeScript bereit, um dessen Leistungsfähigkeit und Flexibilität zu demonstrieren.

Einführung in den Zustand

Zustand ist eine minimalistische Zustandsverwaltungsbibliothek für React, die auf Einfachheit und Leistung ausgerichtet ist. Es bietet eine unkomplizierte API zum Erstellen und Verwalten des Status und erleichtert die Integration in jede React-App. Im Gegensatz zu Redux erfordert Zustand keinen Boilerplate-Code oder eine komplexe Einrichtung, was es ideal für kleine bis mittelgroße Anwendungen macht.

Hauptmerkmale des Zustands

1. Einfache API: Zustand bietet eine einfache und intuitive API zum Erstellen und Verwalten des Status.
2. TypeScript-Unterstützung: Zustand verfügt über eine integrierte TypeScript-Unterstützung, die die Verwendung in TypeScript-Projekten erleichtert.
3. Leistung: Zustand ist so konzipiert, dass es schnell und effizient mit minimalem Overhead ist.
4. Flexibilität: Zustand kann mit jeder React-App verwendet werden, unabhängig von ihrer Größe oder Komplexität.

Erste Schritte mit Zustand

Um Zustand verwenden zu können, müssen Sie die Bibliothek mit npm oder Yarn installieren:

<code>npm install zustand</code>

oder

<code>yarn add zustand</code>

Speicher mit Zustand erstellen

Speicher mit Zustand zu erstellen ist einfach. Sie definieren einen Speicher mit der Funktion create und geben den Anfangszustand und alle Vorgänge an, die Sie für diesen Zustand ausführen möchten.

Beispiel: Einfache Thekenlagerung

Lassen Sie uns einen einfachen Zählerspeicher mit Zustand und TypeScript erstellen.

import create from 'zustand';

interface CounterState {
  count: number;
  increment: () => void;
  decrement: () => void;
}

const useCounterStore = create<CounterState>((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
  decrement: () => set((state) => ({ count: state.count - 1 })),
}));

export default useCounterStore;

In diesem Beispiel definieren wir eine CounterState-Schnittstelle, um die Form unseres Zustands und die Aktionen anzugeben, die wir ausführen möchten. Anschließend erstellen wir den Speicher mit der Funktion create und übergeben eine Funktion, die den Anfangszustand und den Anfangsvorgang zurückgibt.

Speicher in Komponenten verwenden

Da wir nun über Speicher verfügen, können wir ihn in unserer React-Komponente verwenden. Zustand stellt einen Hook namens useStore bereit, der Ihnen den Zugriff auf Status und Vorgänge im Speicher ermöglicht.

import React from 'react';
import useCounterStore from './useCounterStore';

const Counter: React.FC = () => {
  const { count, increment, decrement } = useCounterStore();

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  );
};

export default Counter;

In diesem Beispiel verwenden wir den Hook useCounterStore, um auf die Eigenschaften count, increment und decrement im Speicher zuzugreifen. Anschließend verwenden wir diese Eigenschaften, um die aktuelle Anzahl anzuzeigen und Schaltflächen zum Erhöhen und Verringern der Anzahl bereitzustellen.

Verwenden Sie Zustand für die erweiterte Zustandsverwaltung

Zustand dient nicht nur der einfachen Zustandsverwaltung. Es kann auch komplexere Szenarien wie verschachtelte Zustände, abgeleitete Zustände und asynchrone Vorgänge verarbeiten.

Beispiel: Aufgabenliste mit verschachtelten Zuständen

Lassen Sie uns ein komplexeres Beispiel erstellen: eine To-Do-Liste mit verschachtelten Zuständen.

<code>npm install zustand</code>

In diesem Beispiel definieren wir eine Todo-Schnittstelle, um die Form unserer Aufgabenelemente anzugeben, und eine TodoState-Schnittstelle, um die Form unseres Zustands und der Aktionen anzugeben, die wir ausführen möchten. Anschließend erstellen wir den Speicher mit der Funktion create und übergeben eine Funktion, die den Anfangszustand und den Anfangsvorgang zurückgibt.

Aufgabenspeicher in Komponenten verwenden

Da wir nun To-Do-Speicher haben, können wir ihn in unserer React-Komponente verwenden.

<code>yarn add zustand</code>

In diesem Beispiel verwenden wir den Hook useTodoStore, um auf die Eigenschaften todos, addTodo, toggleTodo und removeTodo im Speicher zuzugreifen. Anschließend verwenden wir diese Eigenschaften, um die Aufgabenliste anzuzeigen und Eingaben und Schaltflächen zum Hinzufügen, Umschalten und Löschen von Aufgabenelementen bereitzustellen.

Bedingung für asynchrone Vorgänge verwenden

Zusand unterstützt auch asynchrone Vorgänge und erleichtert so den Datenabruf und andere asynchrone Vorgänge.

Beispiel: Daten von der API abrufen

Lassen Sie uns ein Beispiel erstellen, in dem wir Daten daraus abrufen und in unserem Zustandsspeicher speichern.

import create from 'zustand';

interface CounterState {
  count: number;
  increment: () => void;
  decrement: () => void;
}

const useCounterStore = create<CounterState>((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
  decrement: () => set((state) => ({ count: state.count - 1 })),
}));

export default useCounterStore;

In diesem Beispiel definieren wir eine DataState-Schnittstelle, um die Form unseres Zustands und die Aktionen anzugeben, die wir ausführen möchten. Anschließend erstellen wir den Speicher mithilfe der Funktion create und übergeben eine Funktion, die den Anfangszustand zurückgibt, sowie die Operation fetchData.

Datenspeicher in Komponenten verwenden

Da wir nun den Datenspeicher haben, können wir ihn in unseren React-Komponenten verwenden.

import React from 'react';
import useCounterStore from './useCounterStore';

const Counter: React.FC = () => {
  const { count, increment, decrement } = useCounterStore();

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  );
};

export default Counter;

In diesem Beispiel verwenden wir den Hook useDataStore, um auf die Eigenschaften data, loading, error und fetchData im Speicher zuzugreifen. Anschließend verwenden wir diese Eigenschaften, um die Liste der Datenelemente anzuzeigen und den Lade- und Fehlerstatus zu verwalten.

Fazit

Zustand ist eine leistungsstarke und flexible Zustandsverwaltungsbibliothek, die die Zustandsverwaltung in React-Anwendungen einfach und effizient macht. Mit seiner einfachen API, der integrierten TypeScript-Unterstützung und Leistungsoptimierungen ist Zustand eine ausgezeichnete Wahl für kleine bis mittlere Anwendungen. Ganz gleich, ob Sie einen einfachen Zähler oder eine komplexe Aufgabenliste erstellen oder Daten von einer API abrufen möchten, mit Zustand sind Sie bestens gerüstet.

Durch die Nutzung von Zustand können Sie die Zustandsverwaltung vereinfachen, Standardcode reduzieren und sich auf die Entwicklung großartiger Benutzererlebnisse konzentrieren. Probieren Sie Zustand bei Ihrem nächsten React-Projekt aus und sehen Sie, wie es Ihren Entwicklungsprozess reibungsloser und angenehmer gestalten kann.

Viel Spaß beim Codieren!

Das obige ist der detaillierte Inhalt vonDer Zustand macht die Reaktion zu einfach. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!