Naar de inhoud
Numio

JSON naar MobX State Tree-modellenconverter — Numio

Converteert een JSON-momentopname naar een MobX-State-Tree-modeldefinitie, const myModel = t.model({...}). Objecten worden t.model, arrays t.array(...) opgebouwd uit alle items, en sleutels die ontbreken of nul zijn in sommige items t.maybe of t.maybeNull.

Een winkelmodel opstarten vanuit een bestaand API-antwoord of opgeslagen momentopname.

JSON

MobX-State-Tree Model

Wanneer gebruik je dit?

  • Een winkelmodel opstarten vanuit een bestaand API-antwoord of opgeslagen momentopname.
  • Verplaatsen van een duidelijke waarneembare status naar de MobX-State-Tree zonder elk type te schrijven.* met de hand bellen.

Hoe werkt het

  1. Plak een JSON-momentopname van uw winkelstatus.
  2. Bekijk de uitvoer van t.model({...}); arrays met objecten bevatten één inline t.model, samengevoegd uit alle items.
  3. Kopieer het, voeg import { types as t } toe uit "mobx-state-tree", en voeg vervolgens identificatiegegevens, acties en weergaven toe.

JSON-momentopname

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

MobX-State-Tree-model

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

Details en beperkingen

Draait in een browser Web Worker; er wordt niets geüpload. De uitvoer is geformatteerd met Prettier.

null naast een reële waarde geeft t.maybeNull(type); een waarde die alleen null is, en de items van een lege array worden t.frozen(), dat elke serialiseerbare waarde accepteert.

Sleutels die in sommige array-items ontbreken, worden t.maybe(...). Arrays van het gemengde type gebruiken t.union, zoals t.array(t.union(t.number, t.string)).

ID's worden niet gedetecteerd als types.identifier en er worden geen t.optionele standaardwaarden, acties of weergaven gegenereerd.

FAQ

Kan de root van de JSON een array zijn?

Ja. Het resultaat wordt t.array(t.model({...})) waarbij de sleutels van alle elementen zijn samengevoegd; sleutels die bij sommige elementen ontbreken, zijn verpakt in t.maybe.

Waarom is mijn ID-veld t.nummer en geen identificatie?

De converter kijkt alleen naar waardetypen. Wijzig het in t.identifier of t.identifierNumber als u referenties of afstemming op id nodig heeft.

Kan ik functies in de invoer opnemen?

Invoer die niet geldig is JSON wordt in plaats daarvan geparseerd als een JavaScript-object, zodat functie-expressies t.frozen worden. In die modus wordt alleen het eerste item van elke array gebruikt, dus invoer van JSON wordt aanbevolen.

Specificaties en referenties