Zustand verstehen

State Management fühlt sich oft zu komplex an.

Du weißt, wie man React useState verwendet. Du weißt, wie man Props übergibt. Du weißt, wie man State nach oben hebt.

Aber alles bricht zusammen, wenn deine App wächst. Du fängst an, Daten durch Komponenten zu schleusen, die sie gar nicht benötigen. Das ist Prop Drilling. Es macht deinen Code unübersichtlich und schwer wartbar.

Zustand löst dieses Problem. Es bietet deiner App einen gemeinsamen State außerhalb deiner React-Komponenten.

Stell es dir so vor:

Ohne Zustand: Komponente A übergibt Props an B, B übergibt Props an C und C übergibt Props an D.

Mit Zustand: Jede Komponente kommuniziert direkt mit einem zentralen Store. Kein Vermittler. Kein Prop Drilling.

Ein Zustand-Store besteht aus zwei Dingen:

  • State: Deine Daten.
  • Actions: Funktionen, die deine Daten ändern.

Das ist schon alles.

Zustand ist schnell, weil es nur die Komponenten neu rendert, die die spezifischen, geänderten Daten verwenden.

Wenn deine Daten einen Seiten-Refresh überstehen sollen, verwende localStorage. Da localStorage nur Strings speichert, musst du JSON.stringify zum Speichern von Objekten und JSON.parse zum Auslesen verwenden.

Hier ist ein einfacher Weg, einen Auth-Store zu strukturieren:

  • Speichere den User und das Token in localStorage.
  • Verwende eine Login-Funktion, um den Store und den Browser-Speicher zu aktualisieren.
  • Verwende eine Logout-Funktion, um beides zu löschen.

Wie schneidet es im Vergleich zu Redux ab?

Redux erfordert Dispatcher und Reducer. Es bringt viel Boilerplate-Code mit sich. Zustand erlaubt es dir, eine Funktion direkt aufzurufen. Es verursacht weniger kognitiven Aufwand und erfordert weniger Setup.

Häufige Fehler, die man vermeiden sollte:

  • Zu vergessen, ein Objekt in der create-Funktion zurückzugeben. Verwende Klammern um dein Objekt.
  • Semikolons innerhalb deines State-Objekts zu verwenden. Verwende stattdessen Kommas.
  • Daten zu parsen, die bereits ein String sind.

Bei State-Management-Libraries geht es nicht darum, den State zu verwalten. Es geht darum, Komplexität zu verwalten.

Hör auf zu versuchen, jede API auswendig zu lernen. Fang an, dir das Problem anzusehen, das das Tool lösen möchte. Wenn du das Problem verstehst, ergibt das Tool Sinn.

Quelle: https://dev.to/chinwuba_jeffrey/understanding-zustand-2g11