mobx state tree

árbol de estado mobx

¿Qué es Mobx-State-Tree?

Técnicamente hablando, MOBX-State-Tree (también conocido como MST) es un sistema de contenedores estatal basado en MOBX, una biblioteca de estado reactiva funcional.

Esto puede no significar mucho para ti, y está bien. Lo explicaré así: MOBX es un "motor" de administración estatal, y Mobx-State-Tree le brinda estructura y herramientas comunes que necesita para su aplicación. MST es valioso en un equipo grande, pero también es útil en aplicaciones más pequeñas cuando espera que su código escala rápidamente. ¡Y si lo comparamos con Redux, MST ofrece un mejor rendimiento y mucho menos código Boilerplate que Redux!

MOBX es una de las alternativas de Redux más populares y es utilizada (junto con el árbol Mobx-State) por empresas de todo el mundo. MST juega muy bien con TypeScript, React y React Native, especialmente cuando se combina con MOBX-React-Lite. Admite múltiples tiendas, acciones de asíncrono y efectos secundarios, permite referencias extremadamente específicas para las aplicaciones React, y mucho más, todo en un paquete con cero dependencias distintas de MOBX.

Nota: No necesita saber cómo usar MOBX para usar MST.

Empezando

Vea el tutorial de inicio o siga el curso gratuito de egghead.io.

Los documentos oficiales se pueden encontrar en http://mobx-state-tree.js.org/

Ejemplo de código rápido

No hay nada como mirar algún código para tener una idea de una biblioteca. Vea este pequeño ejemplo de un autor y lista de tweets por ese autor.

 import { types } from "mobx-state-tree" // alternatively: import { t } from "mobx-state-tree"

// Define a couple models
const Author = types . model ( {
  id : types . identifier ,
  firstName : types . string ,
  lastName : types . string
} )
const Tweet = types . model ( {
  id : types . identifier ,
  author : types . reference ( Author ) , // stores just the `id` reference!
  body : types . string ,
  timestamp : types . number
} )

// Define a store just like a model
const RootStore = types . model ( {
  authors : types . array ( Author ) ,
  tweets : types . array ( Tweet )
} )

// Instantiate a couple model instances
const jamon = Author . create ( {
  id : "jamon" ,
  firstName : "Jamon" ,
  lastName : "Holmgren"
} )

const tweet = Tweet . create ( {
  id : "1" ,
  author : jamon . id , // just the ID needed here
  body : "Hello world!" ,
  timestamp : Date . now ( )
} )

// Now instantiate the store!
const rootStore = RootStore . create ( {
  authors : [ jamon ] ,
  tweets : [ tweet ]
} )

// Ready to use in a React component, if that's your target.
import { observer } from "mobx-react-lite"
const MyComponent = observer ( ( props ) => {
  return < div > Hello, { rootStore . authors [ 0 ] . firstName } ! </ div >
} )

// Note: since this component is "observed", any changes to rootStore.authors[0].firstName
// will result in a re-render! If you're not using React, you can also "listen" to changes
// using `onSnapshot`: https://mobx-state-tree.js.org/concepts/snapshots 

¡Gracias!

• Michel Weststrate para crear Mobx, Mobx-State-Tree y Mobx-React.
• Rojo infinito para apoyar el mantenimiento continuo en MST.
• Mendix por patrocinar y brindar la oportunidad de trabajar en proyectos exploratorios como MST.
• El trabajo de Dan Abramov en Redux ha influido fuertemente en la idea de instantáneas y acciones transaccionales en MST.
• El trabajo de Giulio Canti en los sistemas TCOMB y tipo en general ha influido fuertemente en el sistema de tipo de MST.
• Todos los primeros usuarios alentan a seguir toda esta idea y demostrar que es algo factible.