Zust4help Full Site

// Dispatch actions store.getState().increment() console.log(store.getState().count) // 1

return items: [...state.items, ...product, quantity: 1 ] ), removeItem: (productId) => set((state) => ( items: state.items.filter((i) => i.id !== productId), )), updateQuantity: (productId, quantity) => set((state) => ( items: state.items.map((i) => i.id === productId ? ...i, quantity : i ), )), totalItems: () => get().items.reduce((sum, i) => sum + i.quantity, 0), totalPrice: () => get().items.reduce((sum, i) => sum + i.price * i.quantity, 0), clearCart: () => set( items: [] ), ), name: 'ecommerce-cart' ) )

const useStore = create((set, get) => ( count: 0, increment: () => set((state) => ( count: state.count + 1 )), decrement: () => set((state) => ( count: state.count - 1 )), reset: () => set( count: 0 ), logAndIncrement: () => console.log(`Current count: $get().count`) set((state) => ( count: state.count + 1 )) )) Zustand handles async operations without additional middleware: zust4help full

// Usage in component function CartSummary() const [totalItems, totalPrice] = useCartStore( (state) => [state.totalItems(), state.totalPrice()], shallow ) return <div>totalItems items - $totalPrice</div>

useEffect(() => const unsubscribe = useStore.subscribe( (state) => state.someValue, (value) => console.log(value) ) return unsubscribe , []) // Dispatch actions store

For React integration:

| Feature | Zustand | Redux Toolkit | Context + useReducer | |---------|---------|---------------|----------------------| | Boilerplate | Very low | Medium | High | | Provider required | No | Yes | Yes | | DevTools support | Yes (middleware) | Yes | No | | Async actions | Native | Thunk/Saga | Manual | | Performance | Excellent | Good | Poor (re-renders) | | Learning curve | Minimal | Steep | Moderate | | Bundle size | ~1.5 kB | ~15 kB | ~0 kB (built-in) | Part 8: Real-World Example – Complete E-Commerce Cart import create from 'zustand' import persist from 'zustand/middleware' import shallow from 'zustand/shallow' const useCartStore = create( persist( (set, get) => ( items: [], addItem: (product) => set((state) => const existing = state.items.find((i) => i.id === product.id) if (existing) return items: state.items.map((i) => i.id === product.id ? ...i, quantity: i.quantity + 1 : i ), quantity: 1 ] )

import createStore from 'zustand/vanilla' const store = createStore((set) => ( count: 0, increment: () => set((state) => ( count: state.count + 1 )), ))