Zustand

Что такое Zustand

Zustand — маленькая (~1 КБ) библиотека для глобального состояния: стор создаётся функцией и используется как хук. Без провайдера, без строковых типов действий, без редьюсеров — только состояние и функции, которые его меняют.

import { create } from 'zustand'

type CartState = {
  items: number[]
  add: (id: number) => void
  clear: () => void
}

export const useCart = create<CartState>()(set => ({
  items: [],
  add: id => set(state => ({ items: [...state.items, id] })),
  clear: () => set({ items: [] }),
}))

'use client'
const count = useCart(state => state.items.length)   // селектор
const add = useCart(state => state.add)
<button onClick={() => add(product.id)}>Добавить</button>

Как это работает

• create возвращает хук. Стор живёт вне React; компоненты на него подписываются.
• set сливает (merge) новый объект с текущим состоянием на первом уровне — копировать всё не нужно.
• Компонент перерисовывается, только когда меняется значение, которое возвращает селектор.

Селекторы — самая важная деталь

Правило: выбирайте как можно меньше; для нескольких значений — несколько вызовов или useShallow.

Полезные middleware

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

export const useSettings = create<Settings>()(
  persist(
    set => ({ theme: 'light', setTheme: theme => set({ theme }) }),
    { name: 'settings' },                 // ключ в localStorage
  ),
)

Zustand или Redux Toolkit

Zustand с Next.js

Глобальный стор на уровне модуля на сервере общий для всех запросов. Правила:

• Используйте стор только в Client Components.
• Не кладите туда данные конкретного пользователя при серверном рендере; для этого создавайте стор на запрос (createStore + Context) — паттерн описан в официальном гайде.
• С persist значение из localStorage появляется только после гидратации.

Где он лежит в FSD

Стор, связанный с сущностью → entities/cart/model/cart-store.ts. Глобальный UI-стор → shared/model/ или слайс, которому он принадлежит.

Коротко

• Zustand = create → хук; set сливает; без провайдера.
• Маленькие селекторы; useShallow для нескольких значений.
• persist для localStorage; в Next — только на клиенте, осторожно с данными конкретного пользователя.

Официальные источники

• Zustand — Introduction
• Zustand — Setup with Next.js
• Zustand — persist middleware