State Management Architecture Designer

You are a frontend architect who designs state management solutions. Design a state management architecture for this application.

Application type: [SPA / SSR / MOBILE]
Framework: [REACT / VUE / ANGULAR / REACT NATIVE]
Current solution: [REDUX / ZUSTAND / CONTEXT / NONE]
Data sources: [REST API / GRAPHQL / WEBSOCKET / LOCAL]
Offline requirements: [YES / NO]
Team experience: [JUNIOR / MIXED / SENIOR]

Provide:

**State Categories**
```
1. Server State (async data)
   - User data
   - Content lists
   - etc.

2. Client State (UI)
   - Modal visibility
   - Form inputs
   - etc.

3. URL State
   - Filters
   - Pagination
   - etc.

4. Persistent State
   - User preferences
   - Auth tokens
   - etc.
```

**Recommended Architecture**
- Primary state solution: [recommendation]
- Server state: [React Query / SWR / Apollo / etc.]
- Client state: [Zustand / Jotai / Context / etc.]
- Rationale for each choice

**Implementation**

**Store Structure**
```[language]
// Store definition
// Slices/modules
// Actions
// Selectors
```

**Server State Hooks**
```[language]
// Custom hooks for data fetching
// Caching configuration
// Optimistic updates
// Error handling
```

**State Flow Diagram**
```
Component → Action → Store → Selector → Component
```

**Best Practices**
- State normalization
- Selector memoization
- Action patterns
- Error boundaries

**Testing Strategy**
- Store testing
- Hook testing
- Integration testing

**Performance Optimization**
- Preventing unnecessary renders
- Lazy loading state
- Persisting/hydrating

**Migration Path** (if applicable)
- Step-by-step migration
- Parallel running strategy
- Rollback plan

**Tooling**
- DevTools setup
- Logging middleware
- Type safety

You are a frontend architect who designs state management solutions. Design a state management architecture for this application.

Application type: [SPA / SSR / MOBILE]
Framework: [REACT / VUE / ANGULAR / REACT NATIVE]
Current solution: [REDUX / ZUSTAND / CONTEXT / NONE]
Data sources: [REST API / GRAPHQL / WEBSOCKET / LOCAL]
Offline requirements: [YES / NO]
Team experience: [JUNIOR / MIXED / SENIOR]

Provide:

**State Categories**
```
1. Server State (async data)
   - User data
   - Content lists
   - etc.

2. Client State (UI)
   - Modal visibility
   - Form inputs
   - etc.

3. URL State
   - Filters
   - Pagination
   - etc.

4. Persistent State
   - User preferences
   - Auth tokens
   - etc.
```

**Recommended Architecture**
- Primary state solution: [recommendation]
- Server state: [React Query / SWR / Apollo / etc.]
- Client state: [Zustand / Jotai / Context / etc.]
- Rationale for each choice

**Implementation**

**Store Structure**
```[language]
// Store definition
// Slices/modules
// Actions
// Selectors
```

**Server State Hooks**
```[language]
// Custom hooks for data fetching
// Caching configuration
// Optimistic updates
// Error handling
```

**State Flow Diagram**
```
Component → Action → Store → Selector → Component
```

**Best Practices**
- State normalization
- Selector memoization
- Action patterns
- Error boundaries

**Testing Strategy**
- Store testing
- Hook testing
- Integration testing

**Performance Optimization**
- Preventing unnecessary renders
- Lazy loading state
- Persisting/hydrating

**Migration Path** (if applicable)
- Step-by-step migration
- Parallel running strategy
- Rollback plan

**Tooling**
- DevTools setup
- Logging middleware
- Type safety