Czym się różni reaktywny model stanu MobX od Redux?

Question

Accepted Answer

**MobX** przyjmuje fundamentalnie inny podход niż Redux: zamiast jawnych actions i niezmiennych aktualizacji, używa **przejrzystej reaktywności** — mutajesz bezpośrednio stan observable, a MobX automatycznie śledzi zależności i aktualizuje wszystko, co od niego zależy (podobnie jak reaktywność Vue czy Signals). ## MobX — mutable observables, automatyczne śledzenie ```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(() => ( )); ``` Mutujesz stan bezpośrednio (`this.count++`), a MobX automatycznie ponownie renderuje tylko komponenty `observer`, które czytają `count`. Bez reducers, actions, dispatch czy ręcznej immutability. ## Różnica w filozofii ```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 śledzi zależności ```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. ``` To jest ta sama idea track-on-read/trigger-on-write, która stoi za reaktywnością Vue i 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 ``` ## Dlaczego to ważne MobX reprezentuje **reaktywną/mutable** szkołę zarządzania stanem — przeciwieństwo podejścia **explicit/immutable** Redux. Zrozumienie kontrastu wyjaśnia kluczową oś projektowania: explicit-and-predictable (Redux: śledź każdy action, ale więcej boilerplate'u) kontra automatic-and-concise (MobX: mutuj swobodnie, mniej kodu, ale mniej jawny). Ta sama zasada reaktywna leży u podstaw Vue i Signals, więc opanowanie MobX oświetla całą rodzinę narzędzi state management i pomaga ci wybrać między przewidywalnością a ergonomią dla danego projektu.