Convertir JSON en modèles MobX State Tree — Numio

Quand l’utiliser

• Amorcer le modèle d’un store à partir d’une réponse d’API existante ou d’un snapshot enregistré.
• Passer un état observable simple à MobX-State-Tree sans écrire chaque appel types.* à la main.

Mode d’emploi

1. Collez un snapshot JSON de l’état de votre store.
2. Vérifiez la sortie t.model({...}) ; les tableaux d’objets contiennent un seul t.model inline fusionné à partir de tous les éléments.
3. Copiez-la, ajoutez import { types as t } from "mobx-state-tree", puis ajoutez identifiants, actions et views.

{
  "filter": "all",
  "selectedId": null,
  "todos": [
    { "id": 1, "title": "Write docs", "done": false, "tags": ["work"] },
    { "id": 2, "title": "Ship", "done": true, "dueAt": null }
  ]
}

const myModel = t.model({
  filter: t.string,
  selectedId: t.frozen(),
  todos: t.array(
    t.model({
      id: t.number,
      title: t.string,
      done: t.boolean,
      tags: t.maybe(t.array(t.string)),
      dueAt: t.maybe(t.frozen()),
    }),
  ),
})

Détails et limites

S’exécute dans un Web Worker du navigateur ; rien n’est envoyé. La sortie est formatée avec Prettier.

null à côté d’une valeur réelle donne t.maybeNull(type) ; une valeur toujours null, ainsi que les éléments d’un tableau vide, deviennent t.frozen(), qui accepte toute valeur sérialisable.

Les clés absentes de certains éléments d’un tableau deviennent t.maybe(...). Les tableaux de types mixtes utilisent t.union, comme t.array(t.union(t.number, t.string)).

Les identifiants ne sont pas détectés comme types.identifier, et aucune valeur par défaut t.optional, aucune action ni view n’est générée.

FAQ

Outils associés

Spécifications et références

• MobX-State-Tree: Types overview