lobehub/zustand

Was macht zustand?

LobeHub Zustand Store-Konventionen. Verwenden beim Bearbeiten von src/store, Store-Slices, öffentlichen/internen Aktionen, Dispatch-Aktionen, flattenActions, optimistischen Updates, Selektoren, Maps oder der Migration von Klassenaktionen.

Übersicht

Dieses Dokument beschreibt die empfohlenen Konventionen für die Verwendung von Zustand im LobeHub-Projekt. Ziel ist es, einen konsistenten und wartbaren Ansatz für das State-Management zu gewährleisten.

Kernkonzepte

Store-Struktur

• Slices: Unterteile den Store in logische Slices, um die Code-Organisation zu verbessern.
• Öffentliche Aktionen: Aktionen, die von Komponenten aufgerufen werden können.
• Interne Aktionen: Aktionen, die nur innerhalb des Stores verwendet werden.

Dispatch-Funktion

• Verwende dispatch für asynchrone Aktionen.
• flattenActions hilft, verschachtelte Aktionen zu glätten.

Optimistische Updates

• Führe optimistische Updates durch, um die Benutzererfahrung zu verbessern.
• Stelle sicher, dass Fehler korrekt behandelt werden.

Selektoren

• Verwende benannte Selektoren, um die Wiederverwendbarkeit zu erhöhen.
• Halte Selektoren klein und fokussiert.

Verwendung

import { create } from 'zustand';

const useStore = create((set, get) => ({
  // Zustand
  items: [],
  // Aktionen
  addItem: (item) => set((state) => ({ items: [...state.items, item] })),
}));

Migration von Klassenaktionen

• Ersetze Klassen durch Funktionen.
• Verwende useStore anstelle von Klasseninstanzen.

Weitere Informationen

Siehe Zustand Dokumentation für weitere Details.