48 lines
1.1 KiB
Markdown
48 lines
1.1 KiB
Markdown
# State Management Documentation
|
|
|
|
## State Management Solution
|
|
|
|
The application uses **Zustand** as the primary state management solution for the following reasons:
|
|
|
|
- Simplified API with minimal boilerplate
|
|
- Strong performance characteristics for complex state
|
|
- Good compatibility with React's concurrent features
|
|
- Excellent TypeScript support
|
|
- Middleware support for additional functionality
|
|
|
|
## State Structure
|
|
|
|
The state is divided into several specialized stores for different concerns:
|
|
|
|
### 1. User Store
|
|
|
|
Manages authentication state and user profile information.
|
|
|
|
```javascript
|
|
// userStore.js
|
|
import create from 'zustand';
|
|
import { persist } from 'zustand/middleware';
|
|
|
|
const useUserStore = create(
|
|
persist(
|
|
(set, get) => ({
|
|
user: null,
|
|
isAuthenticated: false,
|
|
credits: 0,
|
|
isPremium: false,
|
|
|
|
// Actions
|
|
setUser: (userData) => set({
|
|
user: userData,
|
|
isAuthenticated: true,
|
|
credits: userData.credits,
|
|
isPremium: userData.isPremium
|
|
}),
|
|
|
|
logout: () => set({
|
|
user: null,
|
|
isAuthenticated: false,
|
|
credits: 0,
|
|
isPremium: false
|
|
}),
|
|
|