zustand-middleware

Compose Zustand middleware for persistence, DevTools, and Immer updates.

187|20|Updated Nov 20, 2025

Search Tags:#Zustand #middleware #devtools #immer #persist

Ready to run

npx skills add https://github.com/TheBushidoCollective/han --skill zustand-middleware

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: zustand-middleware
Source: https://github.com/TheBushidoCollective/han/tree/main/jutsu/jutsu-zustand/skills/zustand-middleware
Command: npx skills add https://github.com/TheBushidoCollective/han --skill zustand-middleware

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Extend Zustand stores with persistence, devtools, and Immer for immutable updates.

Core Features & Use Cases

Persist, devtools, and Immer middleware composition
Practical patterns for store enhancements
Correct middleware order for expected behavior

Quick Start

Compose a store with devtools(persist(immer(...))) in the inner-most position.

Frequently Asked Questions about zustand-middleware

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I persist Zustand store state across browser sessions?▼

Persist middleware saves Zustand store state to local storage or custom storage backends, automatically rehydrating on app reload. Compose it as the middle layer in your middleware stack: devtools(persist(immer(...))) to preserve state across sessions.

What's the correct order for composing Zustand middleware like persist, devtools, and Immer?▼

Middleware order matters: apply them from inner to outer as immer (innermost) → persist → devtools (outermost). This order ensures immutable updates, persistence, and devtools integration work together correctly without conflicts.

Can I use Zustand middleware to track state changes in DevTools?▼

Yes, devtools middleware integrates Zustand stores with Redux DevTools, enabling time-travel debugging and action inspection. Compose it as the outermost layer so it captures all state changes from inner middleware.

How do I configure Zustand persistence with custom storage or migration strategies?▼

Persist middleware accepts storage options (localStorage, sessionStorage, or custom), partialize functions to select which state to save, and migration strategies to transform old state versions. Configure these in the persist options object when composing your store.

Does Zustand middleware support immutable state updates with Immer?▼

Yes, Immer middleware enables draft-based mutations within Zustand actions, automatically producing immutable updates. Compose it as the innermost middleware so mutations are handled before persistence and devtools layers.