state-management

React State Management

Implement state management solution for $ARGUMENTS following project conventions.

Task

Set up or optimize state management based on the requirements:

1. Analyze current setup: Check existing state management approach and project structure
2. Determine solution: Based on requirements, choose appropriate state management:
   • Context API for simple, localized state
   • Redux Toolkit for complex, global state
   • Zustand for lightweight global state
   • Custom hooks for component-level state
3. Examine dependencies: Check package.json for existing state management libraries
4. Implement solution: Create store, providers, and hooks with proper TypeScript types
5. Set up middleware: Add devtools, persistence, or other middleware as needed
6. Create typed hooks: Generate properly typed selectors and dispatch hooks
7. Add tests: Write unit tests for state logic and reducers
8. Update providers: Integrate with app's provider hierarchy

Implementation Requirements

• Follow project's TypeScript conventions
• Use existing state management patterns if present
• Create proper type definitions for state shape
• Include error handling and loading states
• Add proper debugging setup (devtools)
• Consider performance optimizations (selectors, memoization)

State Management Selection Guide

Choose based on complexity:

• Simple state: React hooks + Context API
• Medium complexity: Zustand or custom hooks
• Complex state: Redux Toolkit with RTK Query
• Form state: React Hook Form or Formik

Important Notes

• ALWAYS check existing state management first
• Don't install new dependencies without asking
• Follow project's folder structure for state files
• Consider server state vs client state separation
• Add proper TypeScript types for all state interfaces