zustand-store-ts
Type-Sichere Zustand-Stores für React erstellen
Die Verwaltung von React-State mit korrekten TypeScript-Typen und Middleware ist komplex. Diese Fähigkeit bietet bewährte Muster für die Erstellung wartbarer Zustand-Stores mit subscribeWithSelector und klarer Trennung von State und Actions.
Die Skill-ZIP herunterladen
In Claude hochladen
Gehe zu Einstellungen → Fähigkeiten → Skills → Skill hochladen
Einschalten und loslegen
Teste es
Verwendung von "zustand-store-ts". Create a counter store with increment, decrement, and reset actions
Erwartetes Ergebnis:
Eine TypeScript-Store-Schnittstelle mit Count-State und drei Action-Methoden, plus die create()-Implementierung mit subscribeWithSelector-Middleware um die Store-Definition gewrappt.
Verwendung von "zustand-store-ts". How do I subscribe to only the userId change?
Erwartetes Ergebnis:
Verwende store.subscribe((state) => state.userId, (id) => console.log(id)) um Callbacks nur bei Änderungen von userId zu erhalten, was unnötige Ausführungen bei anderen State-Updates vermeidet.
Sicherheitsaudit
SicherStatic analysis flagged 19 patterns (14 external_commands, 5 blocker/crypto), but all are false positives. The backticks detected are markdown code fence delimiters for TypeScript examples, not shell execution. The cryptographic warnings reference 'subscribeWithSelector' text patterns, not actual crypto algorithms. This is a documentation-only skill with code examples for Zustand state management.
Qualitätsbewertung
Was du bauen kannst
React-Entwickler erstellt globalen State
Erstelle einen neuen Zustand-Store für die Verwaltung von anwendungsweitem State wie Benutzersitzungen, Themes oder Feature-Flags mit voller TypeScript-Unterstützung.
Team standardisiert State-Muster
Etabliere konsistente Store-Muster in einer Codebasis mit korrekter Typisierung, Middleware-Nutzung und Subscription-Best-Practices.
Migration von Redux zu Zustand
Konvertiere bestehende Redux-Stores zu leichtgewichtigen Zustand-Stores unter Beibehaltung der TypeScript-Typen und Optimierung der Re-Renders.
Probiere diese Prompts
Erstelle eine Zustand-Store-Vorlage für einen Warenkorb mit einem Items-Array und Gesamtpreisberechnung. Verwende TypeScript und binde die subscribeWithSelector-Middleware ein.
Generiere einen Benutzer-Store mit asynchronen Login- und Logout-Actions. Binde korrekte TypeScript-Schnittstellen für State und Actions ein, mit Lade- und Fehlerzuständen.
Erstelle einen Projektmanagement-Store mit Aufgaben, Filtern und berechneten Selektoren. Zeige, wie individuelle Selektoren verwendet werden, um unnötige Re-Renders zu vermeiden.
Zeige, wie du außerhalb von React-Komponenten auf Store-Änderungen reagierst für Logging oder Integration mit externen Systemen wie Analytics.
Bewährte Verfahren
- Wickle Stores immer mit subscribeWithSelector-Middleware für granulare Subscriptions ein
- Definiere separate Schnittstellen für State und Actions und kombiniere sie dann für den Store-Typ
- Verwende Selektor-Funktionen in Komponenten, um nur benötigte State-Slices zu abonnieren
Vermeiden
- Das Destrukturieren des gesamten Stores in Komponenten verursacht Re-Renders bei jeder State-Änderung
- Das Erstellen von Stores ohne TypeScript-Schnittstellen verliert die Vorteile der Typsicherheit
- Das Subscriben zum gesamten State-Objekt, wenn nur eine Eigenschaft benötigt wird