mobx state tree

Mobx-State-Tree

Qu'est-ce que Mobx-State-Tree?

Techniquement parlant, MOBX-State-Tree (également connu sous le nom de MST) est un système de conteneur d'état construit sur MOBX, une bibliothèque d'État réactive fonctionnelle.

Cela peut ne pas signifier grand-chose pour vous, et ce n'est pas grave. Je vais l'expliquer comme ceci: Mobx est un "moteur" de gestion de l'État, et Mobx-State-Tree lui donne une structure et des outils courants dont vous avez besoin pour votre application. Le MST est précieux dans une grande équipe mais également utile dans les applications plus petites lorsque vous vous attendez à ce que votre code évolue rapidement. Et si nous le comparons à Redux, MST offre de meilleures performances et beaucoup moins de code passe-partout que Redux!

MOBX est l'une des alternatives Redux les plus populaires et est utilisée (avec MOBX-State-Tree) par les entreprises du monde entier. MST joue très bien avec TypeScript, React et React Native, en particulier lorsqu'il est associé à Mobx-React-Lite. Il prend en charge plusieurs magasins, des actions asynchrones et des effets secondaires, permet des redevateurs extrêmement ciblés pour les applications React, et bien plus encore - le tout dans un package avec zéro dépendances autres que MOBX lui-même.

Remarque: vous n'avez pas besoin de savoir comment utiliser MOBX pour utiliser MST.

Commencer

Voir le didacticiel Get Starting ou suivez le cours gratuit egghead.io.

Les documents officiels peuvent être trouvés sur http://mobx-state-tree.js.org/

Exemple de code rapide

Il n'y a rien de tel que de regarder du code pour avoir une idée d'une bibliothèque. Consultez ce petit exemple d'auteur et de la liste de tweets par cet auteur.

 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 

Merci!

• Michel Weststrate pour créer MOBX, MOBX-State-Tree et Mobx-React.
• Infini rouge pour soutenir l'entretien continu sur MST.
• Mendix pour le parrainage et la possibilité de travailler sur des projets exploratoires comme le MST.
• Le travail de Dan Abramov sur Redux a fortement influencé l'idée de snapshots et d'actions transactionnelles en MST.
• Les travaux de Giulio Canti sur les systèmes TComb et Type en général ont fortement influencé le système de type de MST.
• Tous les premiers adoptants encourageant à poursuivre cette idée et à prouver que c'est quelque chose de faisable.