zustand-5

Create Zustand stores with selectors, persistence, slices, and async actions.

1|Updated Jan 20, 2026

Search Tags:#react #middleware #zustand #state-management #selectors #stores

Ready to run

npx skills add https://github.com/ScorpionConMate/crm-influ-webview --skill zustand-5-scorpionconmate

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: zustand-5
Source: https://github.com/ScorpionConMate/crm-influ-webview/tree/main/.opencode/skills/zustand-5
Command: npx skills add https://github.com/ScorpionConMate/crm-influ-webview --skill zustand-5-scorpionconmate

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides a structured set of Zustand state management patterns to simplify building scalable client-side state in React applications.

Core Features & Use Cases

Basic Store: a minimal Zustand store with state and actions.
Persist Middleware: store state in localStorage across reloads.
Selectors: efficiently read slices of state to minimize re-renders.
Async Actions: handle asynchronous data fetching and updates.
Slices Pattern: compose stores from smaller, reusable slices.
Immer Middleware: enable immutable state mutations with a mutable style.
DevTools: integrate with development tools for debugging.
Outside React: access and subscribe to stores outside components.

Quick Start

Create a simple counter store with a persist middleware and a selector for the counter value.

Frequently Asked Questions about zustand-5

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

FAQPage Schema

How do I manage React state with Zustand stores and selectors?▼

To manage React state with Zustand, you create stores holding state and actions, then use selectors to efficiently read specific state slices and minimize component re-renders. This approach simplifies scalable client-side state management.

What is the best way to persist Zustand state in localStorage across reloads?▼

The best way to persist Zustand state in localStorage across reloads is by applying the persist middleware to your store. This automatically saves and rehydrates your state locally.

How do I handle async data fetching in Zustand stores?▼

You handle async data fetching in Zustand stores by defining asynchronous actions within your store setup. These actions can fetch data and update the state seamlessly across your UI components.

Can I use Immer middleware with Zustand for immutable state mutations?▼

Yes, you can use the Immer middleware with Zustand to enable immutable state mutations using a mutable coding style. This simplifies updating complex nested state objects in your stores.

How do I compose reusable Zustand stores using the slices pattern?▼

You compose reusable Zustand stores using the slices pattern by combining multiple smaller, independent state slices into a single store. This pattern helps organize complex state logic across React applications.

Can I access Zustand stores outside of React components?▼

Yes, you can access and subscribe to Zustand stores outside of React components. This allows you to read or modify state directly from non-UI logic and integrate with development tools for debugging.