Налаштування State Management (Zustand) для React-застосунку

Настройка State Management (Zustand) для React-додатку

Zustand — мініматалістична бібліотека управління станом для React. Ніякого бойлерплейту, ніяких провайдерів, ніякого контексту. Стор — це хук, який працює поза деревом компонентів та не викликає зайвих ре-рендерів.

Підходить для більшості SPA середнього розміру, де Redux надмірний, а вбудованого useState вже недостатньо.

Що входить у роботу

Встановлення та настройка Zustand під конкретний проект: структура сторів, типізація TypeScript, middleware, інтеграція з devtools, персистентність, розбивка на слайси при необхідності.

Встановлення

npm install zustand
# або
pnpm add zustand

Ніяких peer-залежностей. Розмір пакету — близько 1 КБ gzipped.

Базовий стор

import { create } from 'zustand'

interface CartState {
  items: CartItem[]
  total: number
  addItem: (item: CartItem) => void
  removeItem: (id: string) => void
  clearCart: () => void
}

export const useCartStore = create<CartState>((set, get) => ({
  items: [],
  total: 0,

  addItem: (item) =>
    set((state) => {
      const items = [...state.items, item]
      return { items, total: items.reduce((sum, i) => sum + i.price, 0) }
    }),

  removeItem: (id) =>
    set((state) => {
      const items = state.items.filter((i) => i.id !== id)
      return { items, total: items.reduce((sum, i) => sum + i.price, 0) }
    }),

  clearCart: () => set({ items: [], total: 0 }),
}))

Використання в компоненті — просто хук:

function CartButton() {
  const { items, addItem } = useCartStore()
  // компонент ре-рендерится тільки якщо items або addItem змінилися
  return <button onClick={() => addItem(product)}>У кошик ({items.length})</button>
}

Селектори та оптимізація ре-рендерів

За замовчанням компонент підписується на весь стор. Щоб обмежити підписку — передаємо селектор:

// ре-рендер тільки при змінені total
const total = useCartStore((state) => state.total)

// кілька значень — через shallow comparison
import { useShallow } from 'zustand/react/shallow'

const { items, clearCart } = useCartStore(
  useShallow((state) => ({ items: state.items, clearCart: state.clearCart }))
)

Middleware: devtools + persist

import { create } from 'zustand'
import { devtools, persist } from 'zustand/middleware'

export const useAuthStore = create<AuthState>()(
  devtools(
    persist(
      (set) => ({
        user: null,
        token: null,
        login: (user, token) => set({ user, token }, false, 'auth/login'),
        logout: () => set({ user: null, token: null }, false, 'auth/logout'),
      }),
      {
        name: 'auth-storage',
        // збереження тільки token, не весь стор
        partialize: (state) => ({ token: state.token }),
      }
    ),
    { name: 'auth' }
  )
)

Терміни

Базова настройка Zustand для проекту — 1–2 години. Інтеграція з React Router та Tanstack Query — 2–3 години. Повна архітектура сторів для великого додатку — 1 день.