MobX: введение

В Части E ты собрал Task Tracker на чистом React + TypeScript. Теперь перепишем то же приложение на MobX и почувствуем разницу подходов. Функциональность не меняется — меняется способ управления состоянием.

Зачем переписывать

React-хуки управляют состоянием «вручную»: ты сам вызываешь setState, сам перечисляешь зависимости в useMemo/useEffect, сам решаешь, что мемоизировать. MobX переворачивает подход: состояние — это наблюдаемые объекты, а компоненты автоматически подписываются на то, что читают, и перерисовываются при изменении. Никаких массивов зависимостей и setState.

Аспект	React-хуки (Часть E)	MobX (Часть F)
Состояние	useState / useReducer	класс с makeAutoObservable
Изменение	setTasks(prev => ...)	прямое присваивание в action
Производное	useMemo вручную	computed-геттер автоматически
Подписка	сам компонент рендерится	observer подписывается на чтения
Зависимости	массив deps вручную	отслеживаются автоматически

Совет

MobX не «лучше» хуков — он другой. Хуки ближе к ядру React и не требуют библиотек; MobX убирает ручную работу с зависимостями ценой mental model «наблюдаемых». Пройдя обе части, ты сможешь осознанно выбирать.

Что меняется концептуально

1. Состояние переезжает в класс-стор. Вместо useState в компоненте — поля класса TaskStore, помеченные как наблюдаемые через makeAutoObservable.

2. Мутации разрешены — но через actions. В MobX ты пишешь this.tasks.push(task) прямо (не нужен spread), но только внутри метода-действия.

3. Производное состояние — это computed-геттеры. Фильтры и счётчики становятся get-свойствами; они кэшируются и пересчитываются автоматически при изменении зависимостей — аналог useMemo, но без массива зависимостей.

4. Компоненты оборачиваются в observer. Он подписывает компонент на наблюдаемые, которые тот читает, и перерисовывает при их изменении.

Установка

npm install mobx mobx-react-lite

• mobx — само ядро (observable, computed, action, reaction).
• mobx-react-lite — лёгкая интеграция с React для функциональных компонентов (observer, useLocalObservable). Именно lite-версия рекомендуется для функциональных компонентов.

Заметка

Тип Task, Filter и мок-API taskApi остаются те же, что в Окружении Части E. Мы не меняем данные — только слой состояния.

Маршрут Части F

1. Шаг 1 — TaskStore (makeAutoObservable, actions): поля и операции добавления/удаления/переключения. Эквивалент шага E1 (useState).
2. Шаг 2 — computed + observer: фильтры, счётчики и реактивные компоненты. Эквивалент шага E2 (useMemo).
3. Шаг 3 — async + RootStore: загрузка из taskApi (через runInAction и flow), RootStore + Context, персист через autorun. Эквивалент шагов E3 (useEffect), E5 (Context) и E6 (персист).

Поехали — Шаг 1: TaskStore.