The store files (sessionStore.ts and agentStore.ts) provide examples of how to implement global state management with Zustand for the opcode application.
- Eliminates prop drilling across components
- Centralizes state management
- Provides optimized selectors for performance
- Handles real-time updates efficiently
These stores are example implementations that would need to be adapted to match the actual API interface. The current API in lib/api.ts has different method names and signatures than what was assumed in the store implementations.
- Update the store methods to match actual API methods
- Add proper TypeScript types from the API
- Implement WebSocket/SSE for real-time updates
- Connect stores to components using the custom selectors
import { useSessionStore } from '@/stores/sessionStore';
function MyComponent() {
const { sessions, fetchSessions } = useSessionStore();
useEffect(() => {
fetchSessions();
}, []);
return <div>{sessions.length} sessions</div>;
}