Что такое Zustand?

Что такое Zustand?

Zustand — это современная, минималистичная библиотека для управления состоянием (state management) в React-приложениях. В переводе с немецкого "zustand" означает "состояние". Она создана с философией "меньше — значит больше", предлагая простой и эффективный API для работы с глобальным состоянием без избыточного boilerplate-кода, характерного для таких решений как Redux.

Основные концепции и архитектура

В отличие от Redux, где состояние организовано через редьюсеры, действия (actions) и возможно middleware, Zustand использует модель хранилища (store) как единый централизованный объект. Этот хранилище создается с помощью функции create. Ключевые особенности:

• Единое хранилище: Не требует разделения на отдельные модули или редьюсеры.
• Прямое изменение состояния: Использует подход "мутабельного состояния" внутри set-функции, что интуитивно понятно.
• Отсутствие обязательного Context: Не требует оборачивания приложения в Provider, что уменьшает сложность иерархии компонентов.
• Встроенная поддержка middleware: Позволяет легко интегрировать логирование, персистентность и другие побочные эффекты.

Создание и использование хранилища

Базовый store создается одной функцией. Вот типичный пример хранилища для управления счетчиком и пользователем:

import { create } from 'zustand';

// Создание хранилища
const useStore = create((set, get) => ({
  // Состояние
  count: 0,
  user: null,

  // Actions (функции для изменения состояния)
  increment: () => set(state => ({ count: state.count + 1 })),
  decrement: () => set(state => ({ count: state.count - 1 })),
  setUser: (newUser) => set({ user: newUser }),
  // Можно использовать текущее состояние через get()
  reset: () => set({ count: 0, user: null }),
}));

В компонентах React этот store используется через хук, который автоматически подключает компонент к изменениям состояния:

function Counter() {
  // Извлекаем только нужные части состояния и actions
  const count = useStore(state => state.count);
  const increment = useStore(state => state.increment);

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

Преимущества Zustand

• Минимальный boilerplate: Для начала работы нужна лишь одна функция create.
• Производительность: Компоненты могут выбирать (select) конкретные части состояния, что предотвращает лишние ререндеры при изменении нерелевантных данных.
• Отсутствие Provider: Хранилище доступно из любого компонента без необходимости внедрения через Context Provider на верхнем уровне.
• Простота интеграции: Легко комбинируется с другими библиотеками и инструментами.
• Поддержка TypeScript: Имеет прекрасную поддержку типизации без дополнительных усилий.
• Middleware: Включает возможности для персистентности (сохранения состояния в localStorage), логирования, работы с Immutable State и других задач через официальные или community-пакеты.

Сравнение с Redux и Context API

• Vs Redux: Zustand устраняет сложность редьюсеров (reducers), действий (actions), dispatch и необходимости в React-Redux для связки. Он более ориентирован на удобство разработчика.
• Vs Context API: Context API может вызывать лишние ререндеры всех потребителей при изменении любого значения в контексте. Zustand решает эту проблему через механизм выборки (selectors), делая обновления более эффективными.

Практические сценарии использования

Zustand идеально подходит для:

1. Глобального состояния приложения: Например, аутентификация пользователя, темы оформления, настройки.
2. Комплексных форм: Когда состояние формы должно быть доступно в разных компонентах.
3. Кэширования данных: Например, хранить результаты API-запросов для избежания повторных fetch.
4. Управления UI-состоянием: Открытие/закрытие модальных окон, боковых панелей, тостов.

Пример с middleware (персистентность)

Zustand легко расширяется. Вот пример сохранения состояния в localStorage:

import { create } from 'zustand';
import { persist } from 'zustand/middleware';

const usePersistentStore = create(
  persist(
    (set, get) => ({
      theme: 'light',
      setTheme: (newTheme) => set({ theme: newTheme }),
    }),
    {
      name: 'theme-storage', // ключ в localStorage
    }
  )
);

Заключение

Zustand предлагает современный и прагматичный подход к управлению состоянием в React. Он сочетает мощь глобального state management с простотой использования, устраняя многие сложности традиционных библиотек. Для проектов, где Redux кажется излишне сложным, а Context API недостаточно эффективным, Zustand становится отличным компромиссом, повышая скорость разработки и поддерживая высокую производительность приложения.