Зачем нужен State Manager для вынесения бизнес-логики?

State Manager нужен для вынесения бизнес-логики из компонентов, чтобы отделить логику работы с данными от отображения — это улучшает тестируемость, переиспользование и поддерживаемость.

Проблема

Если бизнес-логика (запросы, вычисления, правила) живёт в компонентах — они разрастаются, логика дублируется и смешивается с UI, её трудно тестировать и переиспользовать.

Решение — вынести в State Manager

Логику изменения состояния помещают в редьюсеры/actions/сторы, а компоненты только отображают данные и вызывают действия:

// Логика в сторе (Redux/Zustand)
const useCart = create((set) => ({
  items: [],
  addItem: (item) => set((s) => ({ items: [...s.items, item] })),
  total: () => /* вычисление */,
}));

// Компонент — только UI
function Cart() {
  const { items, addItem } = useCart();
  return <button onClick={() => addItem(product)}>Добавить</button>;
}

Что даёт

• Разделение ответственностей — логика отдельно от UI (компонент «тонкий»).
• Тестируемость — редьюсеры/сторы (чистые функции) легко тестировать без рендера.
• Переиспользование — логика доступна разным компонентам.
• Предсказуемость — изменения через явные действия.
• Централизация — бизнес-правила в одном месте.

Нюанс

Не вся логика — состояние. Серверные данные лучше в TanStack Query; чисто вычислительную логику — в отдельные функции/сервисы.

Коротко для собеседования

State Manager выносит бизнес-логику из компонентов в сторы/редьюсеры/actions, отделяя работу с данными от отображения. Даёт разделение ответственностей (тонкие компоненты), тестируемость (чистые редьюсеры без рендера), переиспользование и предсказуемость. Серверные данные при этом лучше в TanStack Query.