mobx-state-tree

the real redux alternative

MobX vs Redux

MobX vs Redux

  • Definisce una architettura rigida per la nostra applicazione
  • E' unopinionated
  • Il pacchetto npm consiste principalmente in ottimizzazioni e check
  • "implementa" il pattern FLUX

Redux

MobX vs Redux

  • E' una libreria che offre oggetti osservabili
  • E' opinionated
  • Può essere usato con FLUX, MVC, MVVM, MV*

MobX

Redux è davvero componibile?

Ecco fatto!

Se lo uso due volte?

 

  • Al fine di essere perfomanti, i componenti devono essere collegati allo stato facendone riferimento alla posizione assoluta
  • Elm's "forward" actions
  • Le azioni di redux non sono incapsulate, sono sempre globali
  • Il boilerplate di Redux è enorme, anche per componenti molto semplici

mobx-state-tree

Lo stato

  • Invece di definire le logiche di reduzione, definisco la forma dello stato (model)
  • Le model sono factories, data una model, posso creare un istanza usando Counter.create()
  • Come in redux, lo stato è centralizzato ed organizzato ad albero di oggetti osservabili (array, oggetti, etc.)
  • Lo stato non è altro che un insieme di model legate gerarchicamente

Lo stato

  • Lo stato può essere collegato ai componenti usando observer del pacchetto mobx-react
  • Lo stato è tipizzato, permettendo check a compile time (TypeScript) ed anche a runtime sia in develop che in production

Le azioni

  • Le azioni sono collegate direttamente alla model
  • Sono serializzabili
  • Possono essere rieseguite
  • Tengono traccia di quale nodo le ha eseguite

Patch/Snapshot

  • Avvengono a seguito della variazione dello stato
  • Le snapshot sono completamente serializzabili
  • Le patch implementano l'RFC

Ok, ma posso comporre?

  • Le azioni sono incapsulate e rappresentate dalla loro posizione nell'albero, quindi sono perfettamente incapsulate!

Valori computati

  • Le model possono definire valori computati

Thanks!

Made with Slides.com