Jak se reaktivní model stavů MobX liší od Reduxu?

Question

Accepted Answer

**MobX** přistupuje zásadně jiným způsobem než Redux: místo explicitních akcí a neměnných aktualizací používá **transparentní reaktivitu** — přímo mutujete pozorovatelný stav a MobX automaticky sleduje závislosti a aktualizuje všechno, co na tom závisí (podobně jako reaktivita Vue nebo Signals). ## MobX — mutovatelné observables, automatické sledování ```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(() => ( )); ``` Přímo mutujete stav (`this.count++`) a MobX automaticky opakovaně vykresluje pouze komponenty `observer`, které čtou `count`. Žádné reducery, akce, dispatch nebo ruční immutabilita. ## Základní rozdíl ve filosofii ```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 ``` ## Jak MobX sleduje závislosti ```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. ``` Toto je stejná idea track-on-read/trigger-on-write, která stojí za reaktivitou Vue a Signals. ## Kompromisy ```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 ``` ## Proč je to důležité MobX představuje **reaktivní/mutovatelnou** školu správy stavů — opak Reduxova **explicitního/neměnného** přístupu. Pochopení kontrastu objasňuje klíčovou osu návrhu: explicitní-a-předvídatelné (Redux: trasujte každou akci, ale více boilerplatu) versus automatické-a-stručné (MobX: volně mutujte, méně kódu, ale méně explicitní). Samý reaktivní princip je základem Vue a Signals, takže pochopení MobX osvětluje celou rodinu nástrojů stavů a pomáhá vám vybrat si mezi předvídatelností a ergonomií pro daný projekt.