state-zustand-beast-practiceslisted
Install: claude install-skill denish12/codex-ai-agent-and-skills
# Skill: Zustand Beast Practices
Specific DO/DON'T patterns for Zustand — from store architecture to testing.
**Sections:**
1. [Architecture: slice-stores](#1-architecture-slice-stores)
2. [Actions and logic](#2-actions-and-logic)
3. [Selectors and performance](#3-selectors-and-performance)
4. [Middleware: immer, persist, devtools](#4-middleware)
5. [TypeScript typing](#5-typescript-typing)
6. [Testing stores](#6-testing-stores)
7. [React integration](#7-react-integration)
8. [Anti-patterns](#8-anti-patterns)
---
## 1. Architecture: slice-stores
### ✅ DO: one store per domain (bounded context)
```js
// ✅ stores/product-store.js — responsible only for products
import { create } from 'zustand';
export const useProductStore = create((set, get) => ({
// State
products: [],
selectedProductId: null,
isLoading: false,
error: null,
// Actions
fetchProducts: async () => {
set({ isLoading: true, error: null });
try {
const res = await fetch('/api/products');
const products = await res.json();
set({ products, isLoading: false });
} catch (err) {
set({ error: err.message, isLoading: false });
}
},
selectProduct: (id) => set({ selectedProductId: id }),
getSelectedProduct: () => {
const { products, selectedProductId } = get();
return products.find((c) => c.id === selectedProductId) ?? null;
},
}));
```
### ❌ DON'T: one "god-store" for the whole application
```js
// ❌ One store = everything in one place = unma