Come differisce il modello di stato reattivo di MobX da Redux?

Question

Accepted Answer

**MobX** adotta un approccio fondamentalmente diverso da Redux: invece di azioni esplicite e aggiornamenti immutabili, utilizza **reattività trasparente** — mutate direttamente lo stato osservabile, e MobX traccia automaticamente le dipendenze e aggiorna tutto ciò che dipende da esse (simile alla reattività di Vue o ai Signals). ## MobX — osservabili mutabili, tracciamento automatico ```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(() => ( )); ``` Mutate lo stato direttamente (`this.count++`), e MobX ri-renderizza automaticamente solo i componenti `observer` che leggono `count`. Nessun reducer, azioni, dispatch, o immutabilità manuale. ## La differenza filosofica fondamentale ```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 ``` ## Come MobX traccia le dipendenze ```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. ``` Questo è lo stesso concetto di track-on-read/trigger-on-write alla base della reattività di Vue e dei Signals. ## Compromessi ```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 ``` ## Perché è importante MobX rappresenta la scuola di gestione dello stato **reattiva/mutabile** — l'opposto dell'approccio **esplicito/immutabile** di Redux. Comprendere il contrasto chiarisce un asse di design fondamentale: esplicito-e-prevedibile (Redux: traccia ogni azione, ma più boilerplate) vs. automatico-e-conciso (MobX: muta liberamente, meno codice, ma meno esplicito). Lo stesso principio reattivo è alla base di Vue e dei Signals, quindi comprendere MobX illumina un'intera famiglia di strumenti di stato e ti aiuta a scegliere tra prevedibilità ed ergonomia per un dato progetto.