Vai al contenuto
Numio

Convertitore di modelli di alberi di stato da JSON a MobX — Numio

Converte uno snapshot JSON in una definizione del modello MobX-State-Tree, const myModel = t.model({...}). Gli oggetti diventano t.model, gli array t.array(...) costruiti da tutti gli elementi e le chiavi mancanti o nulle in alcuni elementi t.maybe o t.maybeNull.

Bootstrap di un modello di negozio da una risposta API esistente o da uno snapshot salvato.

JSON

MobX-State-Tree Model

Quando usarlo

  • Bootstrap di un modello di negozio da una risposta API esistente o da uno snapshot salvato.
  • Spostamento dello stato osservabile semplice in MobX-State-Tree senza scrivere tutti i tipi.* chiamata a mano.

Come si usa

  1. Incolla un'istantanea JSON dello stato del tuo negozio.
  2. Esaminare l'output t.model({...}); gli array di oggetti contengono un t.model in linea unito da tutti gli elementi.
  3. Copialo, aggiungi import {types as t} da "mobx-state-tree", quindi aggiungi identificatori, azioni e visualizzazioni.

JSON istantanea

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

Modello MobX-albero degli stati

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()),
    }),
  ),
})

Dettagli e limiti

Viene eseguito in un browser Web Worker; non viene caricato nulla. L'output è formattato con Prettier.

null accanto a un valore reale restituisce t.maybeNull(tipo); un valore che è solo nullo e gli elementi di un array vuoto diventano t.frozen(), che accetta qualsiasi valore serializzabile.

Le chiavi assenti in alcuni elementi di un array diventano t.maybe(...). Gli array di tipi misti usano t.union, ad esempio t.array(t.union(t.number, t.string)).

Gli ID non vengono riconosciuti come types.identifier e non vengono generati valori predefiniti t.optional, azioni o viste.

FAQ

La radice di JSON può essere un array?

Sì. Il risultato diventa t.array(t.model({...})) con le chiavi di tutti gli elementi unite; le chiavi assenti in alcuni elementi sono racchiuse in t.maybe.

Perché il mio campo ID è t.number e non un identificatore?

Il convertitore esamina solo i tipi di valore. Modificalo in t.identifier o t.identifierNumber se hai bisogno di riferimenti o riconciliazione tramite ID.

Posso includere funzioni nell'input?

L'input che non è valido JSON viene invece analizzato come un oggetto letterale JavaScript, quindi le espressioni di funzione diventano t.frozen. In questa modalità viene utilizzato solo il primo elemento di ogni array, quindi si consiglia l'input JSON.

Specifiche e riferimenti