# Manage State With Zustand

> Zustand v5 recipes for middleware setup, immer mutations, persistence, and XState sync. Use when: zustand middleware, zustand persist, store patterns. Do not use: for state design patterns, non-Zustand stores.

- **Type:** Skill
- **Install:** `agentstack add skill-woliveiras-geremmyas-manage-state-with-zustand`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [woliveiras](https://agentstack.voostack.com/s/woliveiras)
- **Installs:** 0
- **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [woliveiras](https://github.com/woliveiras)
- **Source:** https://github.com/woliveiras/geremmyas/tree/main/project/.github/skills/manage-state-with-zustand

## Install

```sh
agentstack add skill-woliveiras-geremmyas-manage-state-with-zustand
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# Manage State with Zustand

Recipes for common Zustand v5 patterns. For core rules (when to use, store structure,
middleware order, selectors), see the zustand instruction file which auto-loads for store files.

## Middleware Setup

### With persistence

```ts
create()(
  devtools(
    persist(
      immer((set) => ({
        // state
        items: [],
        // actions
        addItem: (item) => set((state) => { state.items.push(item) }),
        reset: () => set(() => ({ items: [] })),
      })),
      {
        name: "app-items",
        partialize: (state) => ({ items: state.items }),
      },
    ),
    { name: "ItemsStore", enabled: import.meta.env.DEV },
  ),
)
```

### Without persistence

```ts
create()(
  devtools(
    immer((set) => ({
      count: 0,
      increment: () => set((state) => { state.count += 1 }),
    })),
    { name: "CounterStore", enabled: import.meta.env.DEV },
  ),
)
```

## Immer Mutation Recipes

### Update nested item

```ts
updateItem: (id, changes) =>
  set((state) => {
    const item = state.items.find((i) => i.id === id)
    if (item) Object.assign(item, changes)
  }),
```

### Replace whole state (reset)

Return a new object instead of mutating:

```ts
reset: () => set(() => ({ ...DEFAULT_STATE })),
```

### Toggle boolean

```ts
toggleDarkMode: () => set((state) => { state.darkMode = !state.darkMode }),
```

## Syncing with XState

XState owns logic (transitions, guards, side effects).
Zustand is the read cache for components.
Sync in a Provider via subscription, not inside the machine:

```tsx
useEffect(() => {
  const sub = actorRef.subscribe((snapshot) => {
    if (snapshot.matches("authenticated")) {
      useAuthStore.getState().setAuth(snapshot.context.user, snapshot.context.token)
    } else if (snapshot.matches("unauthenticated")) {
      useAuthStore.getState().clearAuth()
    }
  })
  return () => sub.unsubscribe()
}, [actorRef])
```

Key rules:
- Subscribe in a React `useEffect`, not in the Zustand store definition
- Use `getState()` to avoid stale closures
- XState drives state transitions; Zustand reflects them for React consumption

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [woliveiras](https://github.com/woliveiras)
- **Source:** [woliveiras/geremmyas](https://github.com/woliveiras/geremmyas)
- **License:** MIT

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** yes
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-woliveiras-geremmyas-manage-state-with-zustand
- Seller: https://agentstack.voostack.com/s/woliveiras
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.