34. Zustand: Продвинутый уровень

Zustand не просто прост в использовании, он также обладает мощными инструментами для расширения функциональности через Middleware (промежуточное ПО).

Архитектура Middleware

Middleware позволяют перехватывать процесс обновления стейта и добавлять логику: логирование, сохранение в хранилище или интеграцию с DevTools.

graph LR
    Action --> Middleware1
    Middleware1 --> Middleware2
    Middleware2 --> SetState[set state]

Популярные Middleware

1. Persist (Сохранение состояния)

Автоматически сохраняет ваш стейт в localStorage, sessionStorage или IndexedDB. Данные восстанавливаются после перезагрузки страницы.

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

const useAuthStore = create(
  persist(
    (set) => ({
      user: null,
      login: (userData) => set({ user: userData }),
      logout: () => set({ user: null }),
    }),
    {
      name: 'auth-storage', // уникальное имя ключа в localStorage
    }
  )
);

2. Devtools

Позволяет просматривать изменения стейта Zustand в стандартном расширении Redux DevTools.

import { devtools } from 'zustand/middleware';

const useStore = create(devtools(myStoreImplementation));

3. Immer

Позволяет изменять стейт мутирующим способом, как в Redux Toolkit.

import { immer } from 'zustand/middleware/immer';

const useStore = create(
  immer((set) => ({
    nested: { count: 0 },
    inc: () => set((state) => { state.nested.count += 1 }),
  }))
);

Работа вне React

[Icon: External-Link] Одно из уникальных свойств Zustand — возможность использовать его вне компонентов (например, в обычных JS-файлах или обработчиках событий).

// Получить текущее значение без подписки
const bears = useStore.getState().bears;

// Подписаться на изменения (не в компоненте)
const unsub = useStore.subscribe((state) => console.log('Сменилось:', state));

[Icon: Shield] Совет: Для больших приложений используйте разделение сторов по смыслу (например, useUserStore, useCartStore), но помните, что вы всегда можете объединить их.

---

🔗 Полезные ссылки

• Use Context
• Props State
• Redux Toolkit (RTK): Современный Redux
• Обзор подходов к управлению стейтом
• Zustand: Простое управление стейтом

Практика

Попробуйте примеры в интерактивном редакторе: