State Management

В 2016 году Redux требовал 5 файлов для добавления одной async операции. В 2024 году Zustand делает то же самое в 5 строк. Эволюция state management - это история борьбы с boilerplate и поиска правильных abstractions. Signals могут стать следующей революцией - встроенная в браузер fine-grained reactivity без фреймворков.

• **Linear** (task management) использует Zustand для UI state - простота позволила команде из 5 человек создать продукт с лучшим DX в категории
• **Shopify** мигрировал крупные React приложения на Redux Toolkit с RTK Query - типизированный cache invalidation устранил класс bugs с stale data в checkout
• **Google Maps** (Angular) использует Signals начиная с Angular 17 - fine-grained updates позволили обновлять позицию маркера без ре-рендера остальных элементов карты

Redux и Redux Toolkit

Redux - предсказуемый контейнер состояния: единый store, actions описывают что произошло, reducers вычисляют новое состояние. Redux Toolkit (RTK) - официальный способ писать Redux: createSlice автоматически генерирует actions и reducers, createAsyncThunk для async операций, RTK Query для data fetching и кэширования.

Redux DevTools - killer feature: time-travel debugging (перемотка состояния назад/вперёд), action history, state diff между actions. Незаменим при отладке сложных bug в production. Redux оправдан при: сложном sharing state между несвязанными компонентами, debug requirements, нужен audit trail действий пользователя.

Zustand

Zustand - минималистичный state manager для React: без boilerplate, без Provider wrapper, без actions/reducers. Хранилище создаётся через `create()`, компоненты подписываются через хук. 1KB gzip. Достаточно для большинства приложений где Redux избыточен, но Context API недостаточно гибок.

Selective subscription - ключевая оптимизация Zustand: компонент ре-рендерится только при изменении нужного slice состояния. `const name = useStore(state => state.user.name)` - только при изменении name. Immer middleware для mutable mutations. devtools middleware для Redux DevTools интеграции. Persist middleware для localStorage sync.

Pinia (Vue)

Pinia - официальный state manager для Vue 3, заменил Vuex. Composition API style: defineStore с ref/reactive/computed. Автоматическая TypeScript поддержка. Модульный по умолчанию (каждый store - отдельный файл). Pinia DevTools расширяет Vue DevTools - time-travel, action history, state editor.

Pinia Options Store vs Setup Store: Options Store (state/getters/actions) - аналог Vuex, знаком Vue 2 разработчикам. Setup Store - Composition API стиль, более гибкий. Setup Store позволяет использовать composables и Vue 3 функции напрямую. SSR поддержка из коробки - Pinia работает с Nuxt 3 без дополнительной настройки.

Signals - будущее state management

Signals - fine-grained reactivity primitive: значение + подписчики. При изменении signal обновляются только зависящие вычисления, не весь компонент. Появились в SolidJS (2019), затем в Preact, Angular (v16+), Qwik. В 2024 TC39 proposal для JavaScript native signals - потенциальная стандартизация.

Signals vs useState/ref: `useState` в React ре-рендерит весь компонент при изменении. Signal ре-рендерит только использующий его DOM узел. При 1000 компонентах с общим состоянием: Signals обновляют 1 элемент, React без оптимизаций - 1000 компонентов. Qwik и Solid достигают near-zero ре-рендеров через signals + нет virtual DOM.

Ключевые идеи

• **Redux Toolkit + RTK Query** - для сложных приложений с shared state и audit trail; RTK Query заменяет thunks для data fetching с кэшированием
• **Zustand** - минималистичный React state без boilerplate; selective subscription через selector; middleware для persistence и devtools
• **Pinia / Signals** - Pinia для Vue 3 с нативной TypeScript и Composition API; Signals - fine-grained reactivity, будущий стандарт TC39

Связанные темы

State management работает в связке с фреймворками и TypeScript:

• Vue и Angular: сравнение — Pinia - официальный Vue state manager; Angular Signals встроены в Angular 17+
• TypeScript для веба — Redux Toolkit, Zustand и Pinia имеют превосходную TypeScript поддержку - типизированные actions и state

Вопросы для размышления

• Приложение имеет 50 API endpoints и сложный UI state (тысячи пользователей). Как разделить server state и UI state между инструментами?
• Когда Redux DevTools time-travel debugging реально помогает найти bug, а когда это избыточно?
• Если Signals станут нативным JavaScript стандартом - как изменится роль Redux и Zustand?

Связанные уроки

• comp-01-intro