zustand-state-management

SKILL.md

Status: Production Ready ✅ Last Updated: 2025-10-24 Latest Version: zustand@5.0.8 Dependencies: React 18+, TypeScript 5+

CRITICAL: Notice the double parentheses create ()() - this is required for TypeScript with middleware.

✅ Use create ()() (double parentheses) in TypeScript for middleware compatibility ✅ Define separate interfaces for state and actions ✅ Use selector functions to extract specific state slices ✅ Use set with updater functions for derived state: set((state) => ({ count: state.count + 1 })) ✅ Use unique names for persist middleware storage keys

Produktionserprobtes Setup für die Zustandsverwaltung in React-Anwendungen mit TypeScript. Dieser Skill stellt umfassende Muster zum Aufbau eines skalierbaren, typsicheren globalen Zustands bereit. Verwendung bei: Einrichten des globalen Status in React, Migration von Redux oder Context API, Implementierung Zustandspersistenz mit localStorage, TypeScript mit Zustand konfigurieren, Slices-Muster verwenden für modulare Stores, Hinzufügen von Devtools-Middleware zum Debuggen, Handhabung der Next.js SSR-Hydratation, oder es treten Hydratationsfehler, TypeScript-Inferenzprobleme oder anhaltende Middleware-Probleme auf. Verhindert 5 dokumentierte Probleme: Next.js-Feuchtigkeitskonflikte, doppelte TypeScript-Klammern Syntaxfehler, persistente Middleware-Exportfehler, endlose Renderschleifen und Slices-Muster Fehler bei der Typinferenz. Schlüsselwörter: Zustand, Zustandsverwaltung, React-Zustand, TypeScript-Zustand, Persistenz-Middleware, Devtools, Slices-Muster, globaler Status, React-Hooks, Store erstellen, useBoundStore, StateCreator, Hydratationsfehler, Textinhaltskonflikt, unendliches Rendern, localStorage, sessionStorage, immer Middleware, flache Gleichheit, Selektormuster, Zustand v5 Quelle: jackspace/claudeskillz.

Original anzeigen