Fähigkeiten react-state-management

📦

react-state-management

Name: react-state-management
Author: sickn33

Sicher ⚙️ Externe Befehle🌐 Netzwerkzugriff

React State Management implementieren

Auch verfügbar von: wshobson

Dieses Skill hilft Entwicklern bei der Auswahl und Implementierung der richtigen State-Management-Lösung für React-Anwendungen, von einfachem lokalem State bis zu komplexen globalen Stores mit Server-Synchronisation.

Unterstützt: Claude Codex Code(CC)

📊 70 Angemessen

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". Wie wähle ich zwischen Redux Toolkit und Zustand?

Erwartetes Ergebnis:

Für kleine bis mittlere Apps mit einfachen State-Anforderungen bietet Zustand eine minimale API mit hervorragender TypeScript-Unterstützung. Für große Enterprise-Apps, die Middleware, Devtools-Integration und strikte Patterns benötigen, bietet Redux Toolkit Struktur. Verwenden Sie Zustand, wenn: Sie einfachen globalen State ohne Boilerplate benötigen, Sie eine hooks-basierte API bevorzugen, Sie eine minimale Bundle-Größe wünschen. Verwenden Sie Redux Toolkit, wenn: Sie komplexe asynchrone Logik mit Thunks benötigen, Sie striktes Action-Tracking für das Debugging erfordern, Ihr Team mit Redux-Patterns vertraut ist.

Verwendung von "react-state-management". React Query für Daten-Fetching einrichten

Erwartetes Ergebnis:

Installieren Sie @tanstack/react-query, dann wrappen Sie Ihre App mit QueryClientProvider. Erstellen Sie einen Query Client mit Standardoptionen für Caching. Verwenden Sie den useQuery-Hook für Fetching mit Keys für Cache-Management. Verwenden Sie useMutation für Updates mit optimistischen Updates über onMutate. Der Query-Key ['users', userId] ermöglicht automatisches Refetching und Caching.

Sicherheitsaudit

Sicher

v1 • 2/24/2026

This is a documentation skill for React state management patterns. Static analysis flagged external_commands, network, and sensitive data patterns, but evaluation confirms these are FALSE POSITIVES - the 'backticks' are TypeScript template literals in code examples, 'fetch' calls are legitimate API examples, and 'localStorage' access is proper state persistence teaching. No actual security risks identified.

Gescannte Dateien

444

Analysierte Zeilen

befunde

Gesamtzahl Audits

Probleme mit mittlerem Risiko (2)

SKILL.md:22 SKILL.md:47-52 SKILL.md:156

External Command Pattern Detected (FALSE POSITIVE)

Static analyzer flagged backtick usage as shell command execution. This is a false positive - backticks are TypeScript template literals in code examples for educational content about React state management.

SKILL.md:156 SKILL.md:268 SKILL.md:440-443

Network API Calls in Code Examples (FALSE POSITIVE)

Static analyzer flagged fetch() calls and URLs. These are legitimate code examples teaching proper API integration patterns.

Probleme mit niedrigem Risiko (1)

SKILL.md:261 SKILL.md:276

Browser Storage Access (FALSE POSITIVE)

localStorage usage flagged as sensitive data access. This is proper state persistence teaching in React patterns.

Risikofaktoren

Auditiert von: claude

Qualitätsbewertung

Architektur

100

Wartbarkeit

Inhalt

Community

Sicherheit

100

Spezifikationskonformität

Was du bauen kannst

Neues React-Projekt einrichten

Wählen und konfigurieren Sie die passende State-Management-Lösung beim Start einer neuen React-Anwendung

Legacy-Migration

Migration von älteren Redux-Patterns oder Klassenkomponenten zu modernen State-Management-Ansätzen

Performance-Optimierung

Reduzierung unnötiger Re-Renders und Optimierung von State-Zugriffspatterns in bestehenden Anwendungen

Probiere diese Prompts

Grundlegende State-Einrichtung

Zeigen Sie mir, wie ich Zustand für eine einfache React-App mit User-Authentication-State und Theme-Toggle einrichte.

Redux Toolkit Einrichtung

Erstellen Sie einen Redux Toolkit Store mit typisierten Hooks und einem User-Slice, der asynchrones Fetching handhabt.

Server State mit React Query

Richten Sie React Query für das Fetching von User-Daten mit Caching, optimistischen Updates bei Mutationen und Fehlerbehandlung ein.

Atomic State Pattern

Implementieren Sie Jotai-Atoms für einen Warenkorb mit abgeleiteten Atoms für Gesamtsummen und Persistenz in localStorage.

Bewährte Verfahren

Trennen Sie Client State von Server State – verwenden Sie React Query für Serverdaten und Zustand/Redux für UI State
Platzieren Sie State nah an seiner Verwendung – vermeiden Sie, alles im globalen State zu speichern
Verwenden Sie TypeScript für gesamten State-bezogenen Code, um Runtime-Fehler zu verhindern und bessere IDE-Unterstützung zu ermöglichen

Vermeiden

Speichern von Serverdaten im globalen State anstatt React Query zu verwenden – führt zu Synchronisationsproblemen
Übermäßige Globalisierung von State – Platzierung von komponentenspezifischem State in Redux/Zustand, wenn useState ausreicht
Direkte Mutation von State anstatt unveränderlicher Update-Patterns – bricht Reaktivität

Häufig gestellte Fragen

Was ist das beste State Management für ein neues React-Projekt?

Für die meisten neuen Projekte bietet Zustand die beste Balance aus Einfachheit und Leistungsfähigkeit. Verwenden Sie React Query für Server State. Greifen Sie nur auf Redux Toolkit zurück, wenn Sie komplexe asynchrone Workflows haben oder Middleware benötigen.

Wann sollte ich React Query vs Redux verwenden?

Verwenden Sie React Query für Server State (APIdaten, Caching, Synchronisation). Verwenden Sie Redux oder Zustand für Client State (UI State, User Sessions, Formulardaten). Duplizieren Sie niemals Server State in globalen Stores.

Kann ich mehrere State-Lösungen gemeinsam verwenden?

Ja – das wird empfohlen. Verwenden Sie React Query für Server State, Zustand oder Redux für Client State und useState für lokalen Komponenten-State. Jeder dient einem anderen Zweck.

Wie persistiere ich State über Page-Reloads?

Verwenden Sie das Zustand-Persist-Middleware, Jotai atomWithStorage oder Redux-Persist. Für sensible Daten sollten Sie sessionStorage anstatt localStorage in Betracht ziehen.

Was ist der Unterschied zwischen Jotai und Zustand?

Jotai verwendet Atomic State, bei dem jedes Atom unabhängig ist und abgeleitete Atoms automatisch neu berechnet werden. Zustand verwendet einen einzelnen Store mit Selectors. Jotai glänzt bei granularen Updates, Zustand bei Einfachheit.

Wie handhabe ich asynchrone Actions in Redux Toolkit?

Verwenden Sie createAsyncThunk für asynchrone Operationen. Es handhabt pending/fulfilled/rejected States automatisch und integriert sich mit Redux DevTools für das Debugging.

Entwicklerdetails

Autor

sickn33

Lizenz

MIT

Repository

https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/react-state-management

Ref

main

Dateistruktur

📄 SKILL.md