react-state-management
React State Management implementieren
Die Verwaltung von State über React-Komponenten hinweg kann zu komplexem Code und inkonsistenten Daten führen. Dieser Skill bietet umfassende Patterns für Redux Toolkit, Zustand, Jotai und React Query, um lokalen, globalen und Server-State effizient zu handhaben.
Die Skill-ZIP herunterladen
In Claude hochladen
Gehe zu Einstellungen → Fähigkeiten → Skills → Skill hochladen
Einschalten und loslegen
Teste es
Verwendung von "react-state-management". Welche State-Management-Bibliothek sollte ich für eine kleine App mit einfachen globalen State-Anforderungen verwenden?
Erwartetes Ergebnis:
Für kleine Anwendungen mit einfachem globalem State sind Zustand oder Jotai ausgezeichnete Optionen:
**Zustand** bietet die einfachste API mit minimalem Boilerplate:
- Stores mit einer einzigen Hook-ähnlichen Funktion erstellen
- Integrierte Devtools und Persistence Middleware
- Keine Provider erforderlich
- Selektive Subscriptions verhindern unnötige Re-Renders
**Jotai** glänzt, wenn Sie atomare, granulare Updates wünschen:
- Jedes State-Stück ist ein unabhängiges Atom
- Abgeleitete Atoms berechnen sich automatisch aus anderen Atoms
- Perfekt für feinkörnige Reaktivität
Wählen Sie Zustand, wenn Sie ein einheitliches Store-Modell bevorzugen. Wählen Sie Jotai, wenn Sie atomare Updates ohne globalen Store-Wrapper möchten.
Verwendung von "react-state-management". Wie handhabe ich Server-State mit React Query vs. Client-State mit Redux Toolkit?
Erwartetes Ergebnis:
Halten Sie Server-State und Client-State getrennt für Klarheit und Wartbarkeit:
**React Query handhabt Server-State:**
- Server-Daten, Caching und Synchronisierung
- Automatisches Refetching und Hintergrund-Updates
- Stale-while-revalidate Caching-Strategie
- Optimistische Mutations mit Rollback
**Redux Toolkit handhabt Client-State:**
- User-Interface-State (Modals, Sidebar öffnen/schließen)
- Authentifizierungs-State (wenn nicht in Cookies)
- Anwendungspräferenzen und Einstellungen
- Komplexer clientseitiger abgeleiteter State
Diese Trennung verhindert das Vermischen von Zuständigkeiten und erleichtert das Debugging, da jedes Tool einen klaren Zweck hat.
Sicherheitsaudit
SicherAll 44 static findings are false positives. The scanner incorrectly flagged markdown code blocks as shell commands, standard documentation URLs as hardcoded secrets, and React/Redux patterns (state, slices, selectors) as cryptographic or reconnaissance patterns. This is legitimate documentation for React state management libraries.
Qualitätsbewertung
Was du bauen kannst
Auswahl einer State-Lösung für ein neues Projekt
Ein Entwicklungsteam, das eine neue React-Anwendung startet, muss den richtigen State-Management-Ansatz basierend auf App-Größe und Anforderungen auswählen.
Server-Daten-Caching implementieren
Ein Frontend-Entwickler möchte Caching, Hintergrund-Refetching und optimistische Updates für API-Daten in einer React-Anwendung hinzufügen.
Legacy Redux zu modernen Patterns migrieren
Ein Entwickler muss ausführlichen Redux-Boilerplate-Code zu Redux Toolkit mit Immer für immutable Updates aktualisieren.
Probiere diese Prompts
Wie richte ich Redux Toolkit mit TypeScript in einer React-App ein? Zeige, wie man einen Store mit Slices und typisierten useDispatch und useSelector Hooks erstellt.
Zeige mir, wie man einen Zustand Store erstellt, der in localStorage persistiert wird und Devtools-Unterstützung hat. Inkludiere, wie man auf den Store in Komponenten zugreift und typisierte State-Updates handhabt.
Schreibe eine React Query Mutation, die optimistische Updates durchführt. Inkludiere onMutate für Snapshots des vorherigen States, onError für Rollback und onSettled für Refetching.
Wie kombiniere ich React Query für Server-State mit Zustand für clientseitigen State in derselben Anwendung? Zeige die Trennung der Zuständigkeiten und wie Komponenten beide konsumieren.
Bewährte Verfahren
- State so nah wie möglich dort platzieren, wo er verwendet wird - vermeiden Sie es, alles im globalen State zu speichern
- Selektoren verwenden, um nur die benötigten Daten aus Stores auszuwählen und unnötige Komponenten-Re-Renders zu verhindern
- Server-State (React Query) von Client-State (Zustand/Redux) trennen - jeder hat unterschiedliche Update-Patterns und Lebenszyklen
Vermeiden
- Jedes State-Stück in den globalen State zu legen, nur weil es von mehreren Komponenten aufgerufen wird - lokaler State ist oft ausreichend
- State direkt mutieren, anstatt immutable Update-Patterns oder Bibliotheken wie Immer zu verwenden
- Server-State sowohl in React Query als auch in Client-Stores duplizieren - lassen Sie React Query die einzige Quelle der Wahrheit für Server-Daten sein