# State Management Architect

> Implement clean application state management patterns (Zustand, Redux Toolkit, Pinia) with atomic state updates.

- Skill: `rmazrim/state-management-architect` (Agent Skill)
- Install (CLI): `npx skillmds@latest add rmazrim/state-management-architect`
- Raw SKILL.md: https://api.skillmd.com/api/skills/rmazrim/state-management-architect/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: RMAzrim (https://skillmd.com/u/rmazrim)
- Updated: 2026-09-22
- Page: https://skillmd.com/skills/rmazrim/state-management-architect

---


# State Management Architect

## Prerequisites & Dependencies
- React 16.8+ or Vue 3 project
- Mandatory library: `npm i zustand` (or `npm i @reduxjs/toolkit` / `npm i pinia` for Vue)
- TypeScript recommended for type-safe reducers/actions

## Execution Steps
1. Choose the state library matching the framework (Zustand for React lightweight, Redux Toolkit for enterprise, Pinia for Vue)
2. Define a store/slice with immutable state updates and explicit reducers/actions
3. Wire the store into root component (`provideStore`, `useStore`, or `usePinia`)
4. Implement atomic state updates: dispatch actions that return new state objects, avoid direct mutations
5. Selector patterns: compute derived state using `createSelector` (RTS) or Zustand's `useStoreState`
6. Persist critical state to `localStorage`/`sessionStorage` or backend using library built-ins
7. Test state transitions with `redux-mock-store` or Vue Test Utils, ensure no side effects leak

```typescript
// Zustand store example with atomic updates
import create from 'zustand';

interface CounterState {
  count: number;
  increment: (by: number) => void;
  decrement: (by: number) => void;
}

export const useCounter = create<CounterState>((set) => ({
  count: 0,
  increment: (by = 1) => set((state) => ({ count: state.count + by })),
  decrement: (by = 1) => set((state) => ({ count: state.count - by })),
}));
```