Какие знаешь менеджеры состояний?

Менеджеры состояний в современном Frontend-разработке

За 10+ лет работы с Frontend я прошел эволюцию от простых глобальных переменных до сложных систем управления состоянием. Сегодня экосистема предлагает десятки решений, которые условно можно разделить на несколько категорий.

Локальные менеджеры состояний (State Management Libraries)

Эти библиотеки предоставляют абстракции для управления состоянием внутри компонентов или на уровне приложения.

Redux и его экосистема

Redux — исторически самый влиятельный менеджер, основанный на принципах Flux-архитектуры (единый store, иммутабельные обновления через reducers).

// Типичная структура Redux
const initialState = { count: 0 };

function counterReducer(state = initialState, action) {
  switch (action.type) {
    case 'INCREMENT':
      return { ...state, count: state.count + 1 };
    default:
      return state;
  }
}

• Redux Toolkit (RTK) — современная официальная абстракция, устраняющая boilerplate код. Включает createSlice, createAsyncThunk, встроенную поддержку Immer для мутабельного синтаксиса.
• RTK Query — мощное решение для управления состоянием данных с сервера (кэширование, инвалидация, polling).
• Reselect — библиотека для создания мемоизированных селекторов, критичная для производительности.

MobX

Альтернативная философия, основанная на реактивном программировании и прозрачном отслеживании зависимостей.

import { makeAutoObservable } from 'mobx';

class CounterStore {
  count = 0;
  
  constructor() {
    makeAutoObservable(this);
  }
  
  increment() {
    this.count++;
  }
}
// Компоненты автоматически реагируют на изменения полей

• Использует концепции observables, actions, computed values.
• Менее явный, но часто требует меньше кода, чем Redux.

Zustand

Современный минималистичный менеджер, набирающий огромную популярность.

import create from 'zustand';

const useStore = create((set) => ({
  bears: 0,
  increasePopulation: () => set((state) => ({ bears: state.bears + 1 })),
  removeAllBears: () => set({ bears: 0 }),
}));
// Использование в компоненте: прямое получение нужного поля

• Простота API — один вызов create создает store.
• Отсутствие boilerplate — нет providers, actions, dispatchers.
• Встроенная поддержка мемоизации и мидлваров.

Recoil (от Meta)

Решение, тесно интегрированное с реактивностью React, основанное на концепциях атомов (atoms) и селекторов (selectors).

// atom.js
export const textState = atom({
  key: 'textState', // уникальный ключ
  default: '', // начальное значение
});

// Selector для производного состояния
export const charCountState = selector({
  key: 'charCountState',
  get: ({get}) => {
    const text = get(textState);
    return text.length;
  },
});

• Позволяет создавать мелкозернистые подписки на данные.
• Естественно работает с Concurrent Features React.

Jotai

Вдохновлен Recoil, но еще более минималистичный. Использует примитивы (atoms), составленные для создания сложного состояния.

import { atom, useAtom } from 'jotai';

const countAtom = atom(0);
const doubledAtom = atom((get) => get(countAtom) * 2);

function Component() {
  const [count, setCount] = useAtom(countAtom);
  const [doubled] = useAtom(doubledAtom);
}

• Отсутствие глобальных ключей — атомы идентифицируются ссылками.
• Идеально подходит для инкрементальной миграции и композиции.

Valtio

Основан на прокси-объектах, предоставляя простой API для мутабельного обновления состояния с реактивными подписками.

import { proxy, useSnapshot } from 'valtio';

const state = proxy({ count: 0, text: 'hello' });

// Мутация напрямую
state.count++;

// Подписка в компоненте
const snap = useSnapshot(state); // Компонент перерисуется при изменении count или text

Управление состоянием на уровне сервера (Server State)

Отдельная категория, ставшая критически важной в эпоху SPA и богатых клиентов.

• TanStack Query (ранее React Query) — де-факто стандарт для синхронизации, кэширования и обновления асинхронного состояния. Превосходно обрабатывает фоновые обновления, оптимистичные updates, пагинацию.
• SWR (от Vercel) — альтернатива с похожей философией ("stale-while-revalidate").
• Apollo Client — специализированное решение для GraphQL, предоставляющее нормализованный кэш и интуитивные хуки.

Встроенные решения фреймворков

• React Context API — не является менеджером состояний в полном смысле, а механизмом пропсания зависимостей. Может использоваться для простого глобального состояния, но не оптимизирован для частых изменений (проблема ненужных ререндеров).
• Vuex / Pinia (для Vue.js) — Pinia — современное решение для Vue 3, предлагающее простой API, TypeScript-совместимость и модульную архитектуру.
• NgRx / Akita (для Angular) — NgRx построен на принципах Redux, а Akita предлагает более объектно-ориентированный подход.

Критерии выбора менеджера состояний

На проекте мы выбираем решение, анализируя:

1. Сложность приложения — для небольшого приложения достаточно Context API или Zustand, для enterprise-решений — Redux Toolkit или MobX.
2. Тип состояния — клиентское UI-состояние (Zustand, Jotai), серверное состояние (TanStack Query), глобальное бизнес-состояние (Redux, MobX).
3. Команда и экосистема — наличие готовых middleware (Redux), инструментов разработки (Redux DevTools, MobX DevTools).
4. Производительность — необходимость мемоизации селекторов, мелкозернистых подписок (Recoil, Jotai).
5. TypeScript поддержка — все современные библиотеки имеют отличную типизацию.

Тренд последних лет — переход от единого монолитного store (как в классическом Redux) к коллекции независимых, композитных сторов (Zustand, Jotai) и обязательному выделению серверного состояния в отдельный слой с помощью TanStack Query. Это упрощает архитектуру, тестирование и повторное использование логики.