Przejdź do treści
Numio

Konwerter JSON na modele MobX State Tree — Numio

Konwertuje migawkę JSON na definicję modelu MobX-State-Tree, const myModel = t.model({...}). Obiekty stają się t.model, tablice t.array(...) zbudowane ze wszystkich elementów, a klucze, których brakuje lub mają wartość null w niektórych elementach t.maybe lub t.maybeNull.

Ładowanie modelu sklepu z istniejącej odpowiedzi API lub zapisanej migawki.

JSON

MobX-State-Tree Model

Kiedy go używać

  • Ładowanie modelu sklepu z istniejącej odpowiedzi API lub zapisanej migawki.
  • Przenoszenie zwykłego obserwowalnego stanu do drzewa stanów MobX bez zapisywania wszystkich typów.* wywoływanie ręcznie.

Jak używać

  1. Wklej migawkę stanu sklepu JSON.
  2. Przejrzyj wynik t.model({...}); tablice obiektów zawierają jeden wbudowany model t.połączony ze wszystkich elementów.
  3. Skopiuj go, dodaj import {types as t} z „mobx-state-tree”, a następnie dodaj identyfikatory, akcje i widoki.

Migawka JSON

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

MobX-Model drzewa stanu

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

Szczegóły i ograniczenia

Działa w przeglądarce Web Worker; nic nie jest przesyłane. Dane wyjściowe są sformatowane przy użyciu programu Prettier.

null obok wartości rzeczywistej daje t.maybeNull(typ); wartość, która ma tylko wartość null, a elementy pustej tablicy stają się funkcją t.frozen(), która akceptuje dowolną wartość, którą można serializować.

Brakujące klucze w niektórych elementach tablicy stają się t.maybe(...). Tablice typu mieszanego używają t.union, na przykład t.array(t.union(t.number, t.string)).

Identyfikatory nie są wykrywane jako types.identifier. Nie są generowane wartości domyślne t.optional, akcje ani widoki.

FAQ

Czy katalog główny JSON może być tablicą?

Tak. Wynikiem będzie t.array(t.model({...})) z połączonymi kluczami wszystkich elementów; Brakujące klucze w niektórych elementach są zawinięte w t.maybe.

Dlaczego moje pole identyfikacyjne to t.number, a nie identyfikator?

Konwerter sprawdza tylko typy wartości. Zmień go na t.identifier lub t.identifierNumber jeśli potrzebujesz referencji lub uzgodnienia po id.

Czy mogę uwzględnić funkcje na wejściu?

Dane niebędące poprawnym JSON są analizowane jako literał obiektu JavaScript, więc wyrażenia funkcyjne stają się t.frozen. W tym trybie używany jest tylko pierwszy element każdej tablicy, dlatego zalecany jest JSON.

Specyfikacje i referencje