Чем модель реактивного состояния MobX отличается от Redux?

Question

Accepted Answer

**MobX** использует принципиально другой подход, чем Redux: вместо явных action и неизменяемых обновлений он использует **прозрачную реактивность** — вы напрямую изменяете observable состояние, а MobX автоматически отслеживает зависимости и обновляет всё, что от него зависит (как реактивность в Vue или Signals). ## MobX — изменяемые observables, автоматическое отслеживание ```js import { makeAutoObservable } from "mobx"; import { observer } from "mobx-react-lite"; class CounterStore { count = 0; constructor() { makeAutoObservable(this); } // make fields observable increment() { this.count++; } // ✅ DIRECT mutation — no actions, no immutability get double() { return this.count * 2; } // computed — auto-derived & cached } const store = new CounterStore(); // observer components auto-re-render when the observables they read change const Counter = observer(() => ( )); ``` Вы изменяете состояние напрямую (`this.count++`), а MobX автоматически перерисовывает только компоненты `observer`, которые читают `count`. Без reducers, actions, dispatch или ручной неизменяемости. ## Фундаментальное различие в философии ```text Redux MobX Updates immutable (return new state) mutable (change in place) Mechanism explicit actions + reducers transparent reactive tracking Data flow strict one-way, predictable automatic dependency reactions Boilerplate more less Derived values selectors (manual) computed (automatic, cached) Mental model functional / explicit OOP / reactive / implicit ``` ## Как MobX отслеживает зависимости ```text MobX wraps observables in proxies. When an observer component renders, MobX records which observables it READ. When any of those change, MobX re-runs exactly that component — fine-grained, automatic, no selectors needed. ``` Это та же концепция track-on-read/trigger-on-write, лежащая в основе реактивности Vue и Signals. ## Компромиссы ```text MobX pros: less boilerplate, automatic reactivity, easy derived values, OOP-friendly MobX cons: "magic" can be less explicit/traceable than Redux's logged actions; mutation-based flow is harder to time-travel debug than pure reducers ``` ## Почему это важно MobX представляет **реактивную/изменяемую** школу управления состоянием — противоположность подходу Redux **явного/неизменяемого**. Понимание этого контраста проясняет ключевую ось проектирования: явное-и-предсказуемое (Redux: отслеживайте каждый action, но больше boilerplate) против автоматического-и-лаконичного (MobX: изменяйте свободно, меньше кода, но менее явно). То же реактивное начало лежит в основе Vue и Signals, поэтому понимание MobX освещает целое семейство инструментов управления состоянием и помогает вам выбрать между предсказуемостью и удобством для конкретного проекта.