Можно ли объединить 2 микростора в 1 стор в Zustand?

Можно ли объединить два микростора в один стор в Zustand?

Да, объединение нескольких микросторов в один стор в Zustand не только возможно, но и является одной из ключевых и гибких возможностей этой библиотеки для управления состоянием в React-приложениях. Zustand предоставляет несколько подходов для решения этой задачи, позволяя организовать логику состояния модульно, избегая монолитных структур, при этом сохраняя доступ ко всему состоянию через единый хук.

Основные подходы к объединению сторов

1. Создание единого корневого стора с комбинированными состояниями

Самый прямой способ — объявить один стор, который включает в себя состояния и методы из нескольких независимых областей. Zustand позволяет разделить логику с помощью селекторов или срезов (slices), но формально это будет один объект стора.

import { create } from 'zustand';

const useCombinedStore = create((set, get) => ({
  // Микростор 1: управление пользователем
  user: null,
  setUser: (user) => set({ user }),
  clearUser: () => set({ user: null }),

  // Микростор 2: управление настройками UI
  theme: 'light',
  toggleTheme: () => set((state) => ({ theme: state.theme === 'light' ? 'dark' : 'light' })),
}));

2. Использование паттерна срезов (slices pattern)

Более структурированный подход — определение независимых срезов состояния, которые потом комбинируются в create. Это делает код модульным и упрощает тестирование. Каждый срез — это функция, возвращающая объект с частью состояния и действиями.

import { create } from 'zustand';

// Срез для пользователя
const createUserSlice = (set, get) => ({
  user: null,
  login: (userData) => set({ user: userData }),
  logout: () => set({ user: null }),
});

// Срез для UI
const createUISlice = (set, get) => ({
  theme: 'light',
  toggleTheme: () => set((state) => ({ theme: state.theme === 'light' ? 'dark' : 'light' })),
});

// Объединение срезов в один стор
const useCombinedStore = create((...args) => ({
  ...createUserSlice(...args),
  ...createUISlice(...args),
}));

3. Комбинация независимых сторов через middleware или внешние утилиты

Zustand поддерживает middleware (например, combine из zustand/vanilla или пользовательские решения), которые позволяют формально объединять несколько сторов. Однако важно помнить, что каждый вызов create создает отдельный контекст, поэтому для полной интеграции действий и состояния лучше использовать срезы.

Ключевые преимущества объединения

• Единая точка входа: Все состояние доступно через один хук (useCombinedStore), что упрощает импорт и использование.
• Изоляция логики: Срезы позволяют разделить ответственность (например, userSlice, cartSlice, uiSlice).
• Производительность: Zustand автоматически оптимизирует перерисовки, подписывая компоненты только на те части состояния, которые они используют (через селекторы).

  // Компонент подписывается только на `theme`
  const theme = useCombinedStore((state) => state.theme);
  

• Гибкость: Можно легко добавлять или удалять срезы без переписывания всей логики.

Пример с типами TypeScript

Для полной типобезопасности можно описать типы для каждого среза:

import { create, StateCreator } from 'zustand';

interface UserSlice {
  user: User | null;
  login: (user: User) => void;
  logout: () => void;
}

interface UISlice {
  theme: 'light' | 'dark';
  toggleTheme: () => void;
}

const createUserSlice: StateCreator<UserSlice & UISlice, [], [], UserSlice> = (set) => ({
  user: null,
  login: (user) => set({ user }),
  logout: () => set({ user: null }),
});

const createUISlice: StateCreator<UserSlice & UISlice, [], [], UISlice> = (set) => ({
  theme: 'light',
  toggleTheme: () => set((state) => ({ theme: state.theme === 'light' ? 'dark' : 'light' })),
});

const useCombinedStore = create<UserSlice & UISlice>()((...args) => ({
  ...createUserSlice(...args),
  ...createUISlice(...args),
}));

Важные нюансы

• При объединении убедитесь, что имена свойств и методов в срезах не конфликтуют (например, два среза не должны содержать метод reset с разной логикой).
• Для сложных сценариев можно использовать middleware (например, redux или persist для сохранения состояния), которые также работают с объединенными сторами.
• Если требуется полностью изолировать сторы (например, для lazy-loading), можно использовать отдельные вызовы create, но тогда для совместного использования состояния между ними потребуется контекст React или внешнее управление.

Заключение

Объединение микросторов в Zustand — практичный и рекомендуемый подход для масштабирования приложений. Использование срезов (slices) считается оптимальным, так как оно сочетает модульность, типобезопасность и простоту поддержки. Это позволяет избежать "раздувания" одного стора, сохраняя при этом все преимущества централизованного состояния. Важно выбирать подход исходя из сложности проекта: для небольших приложений подойдет простой объект, а для крупных — комбинация типизированных срезов.