zustand-state

Manage React and vanilla JavaScript state with Zustand stores, selectors, and middleware.

Updated Dec 17, 2025

Search Tags:#react #middleware #devtools #persistence #zustand #state-management #vanilla

Ready to run

npx skills add https://github.com/Lrmdom/patrimonio-pwa --skill zustand-state-lrmdom

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: zustand-state
Source: https://github.com/Lrmdom/patrimonio-pwa/tree/main/.windsurf/skills/zustand-state
Command: npx skills add https://github.com/Lrmdom/patrimonio-pwa --skill zustand-state-lrmdom

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Zustand provides a lightweight, zero-boilerplate state management solution for React and vanilla JavaScript, enabling store creation, consumption via selectors, and easy middleware integration without Redux.

Core Features & Use Cases

Create stores with the curried create syntax and separate state from actions.
Persist state to localStorage, integrate devtools, and use immer for mutable updates.
Use vanilla stores outside React and leverage typed selectors for safe state access.

Quick Start

Create a simple zustand store and read a value via a selector to see it in the UI.

Frequently Asked Questions about zustand-state

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

FAQPage Schema

How do I create a Zustand store in React and separate state from actions?▼

Create a Zustand store using the curried create syntax to define your initial state values and actions separately. This approach ensures zero-boilerplate state management without requiring Redux-style reducers for your React components.

Can I use Zustand for state management outside of React in vanilla JavaScript?▼

Yes, Zustand supports vanilla JavaScript stores outside of the React ecosystem. You can manage app state independently and consume it wherever needed, allowing you to share state logic across different environments beyond React components.

What's the best way to persist Zustand state to localStorage?▼

The best way to persist Zustand state is by applying the persist middleware to your store. This automatically synchronizes your state values to localStorage, ensuring data remains saved across page reloads without manual storage event handling.

Does Zustand work with Redux devtools for debugging state changes?▼

Yes, Zustand integrates directly with Redux devtools through the devtools middleware. This allows you to inspect state changes, track dispatched actions, and debug your store's history seamlessly using the standard browser devtools extension.

How do I handle mutable state updates in Zustand without mutating the store directly?▼

Use the immer middleware with Zustand to handle mutable state updates safely. Immer allows you to write code that appears to mutate the state directly while producing an immutable next state, simplifying complex nested object updates.

Why use typed selectors when reading Zustand state in client components?▼

Typed selectors ensure safe state access by enforcing TypeScript type checking on the values extracted from the store. This prevents runtime errors and guarantees that your client components consume the correct data shapes from the state.