Zum Inhalt springen
Numio

JSON in MobX-State-Tree-Modelle umwandeln — Numio

Wandelt einen JSON-Snapshot in eine MobX-State-Tree-Modelldefinition um, const myModel = t.model({...}). Objekte werden zu t.model, Arrays zu t.array(...), gebildet aus allen Elementen, und Schlüssel, die in einigen Elementen fehlen oder null sind, zu t.maybe oder t.maybeNull.

Ein Store-Modell aus einer vorhandenen API-Antwort oder einem gespeicherten Snapshot aufsetzen.

JSON

MobX-State-Tree Model

Wann sie hilft

  • Ein Store-Modell aus einer vorhandenen API-Antwort oder einem gespeicherten Snapshot aufsetzen.
  • Einfachen Observable-State nach MobX-State-Tree migrieren, ohne jeden types.*-Aufruf von Hand zu schreiben.

Anwendung

  1. Füge einen JSON-Snapshot deines Store-Zustands ein.
  2. Prüfe die Ausgabe t.model({...}); Arrays von Objekten enthalten ein Inline-t.model, das aus allen Elementen zusammengeführt ist.
  3. Kopiere sie, füge import { types as t } from "mobx-state-tree" hinzu und ergänze dann Identifier, Actions und Views.

JSON-Snapshot

{
  "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-Modell

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 und Einschränkungen

Läuft in einem Web Worker im Browser; nichts wird hochgeladen. Die Ausgabe wird mit Prettier formatiert.

null neben einem echten Wert ergibt t.maybeNull(type); ein Wert, der nur null ist, und die Elemente eines leeren Arrays werden zu t.frozen(), das jeden serialisierbaren Wert akzeptiert.

Schlüssel, die in einigen Array-Elementen fehlen, werden zu t.maybe(...). Arrays mit gemischten Typen verwenden t.union, etwa t.array(t.union(t.number, t.string)).

IDs werden nicht als types.identifier erkannt, und es werden keine t.optional-Standardwerte, Actions oder Views erzeugt.

FAQ

Kann die oberste Ebene des JSON ein Array sein?

Ja. Das Ergebnis wird zu t.array(t.model({...})), wobei die Schlüssel aller Elemente zusammengeführt werden; in einigen Elementen fehlende Schlüssel werden in t.maybe eingeschlossen.

Warum ist mein id-Feld t.number und kein Identifier?

Der Konverter betrachtet nur die Werttypen. Ändere es in t.identifier oder t.identifierNumber, wenn du Referenzen oder einen Abgleich per id brauchst.

Kann ich Funktionen in die Eingabe aufnehmen?

Eingabe, die kein gültiges JSON ist, wird stattdessen als JavaScript-Objektliteral geparst, sodass Funktionsausdrücke zu t.frozen werden. In diesem Modus wird nur das erste Element jedes Arrays verwendet, daher wird JSON-Eingabe empfohlen.

Spezifikationen und Referenzen