Перейти к содержимому
Numio

Конвертер JSON в модели MobX State Tree — Numio

Преобразует JSON-снимок в определение модели MobX-State-Tree, const myModel = t.model({...}). Объекты становятся t.model, массивы — t.array(...), построенным по всем элементам, а ключи, отсутствующие или равные null в некоторых элементах, — t.maybe или t.maybeNull.

Быстро создать модель стора по существующему ответу API или сохранённому снимку.

JSON

MobX-State-Tree Model

Когда пригодится

  • Быстро создать модель стора по существующему ответу API или сохранённому снимку.
  • Перевести простое observable-состояние на MobX-State-Tree, не выписывая вручную каждый вызов types.*.

Как пользоваться

  1. Вставьте JSON-снимок состояния вашего стора.
  2. Проверьте вывод t.model({...}); массивы объектов содержат один встроенный t.model, объединённый по всем элементам.
  3. Скопируйте его, добавьте import { types as t } from "mobx-state-tree", затем добавьте идентификаторы, actions и views.

JSON-снимок

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

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

Подробности и ограничения

Работает в Web Worker браузера; ничего не загружается. Результат форматируется Prettier.

null рядом с реальным значением даёт t.maybeNull(type); значение, которое только null, и элементы пустого массива становятся t.frozen(), принимающим любое сериализуемое значение.

Ключи, отсутствующие в некоторых элементах массива, становятся t.maybe(...). Массивы со смешанными типами используют t.union, например t.array(t.union(t.number, t.string)).

ID не распознаются как types.identifier, и значения по умолчанию t.optional, actions и views не генерируются.

FAQ

Может ли корень JSON быть массивом?

Да. Результатом будет t.array(t.model({...})) с объединёнными ключами всех элементов; ключи, отсутствующие в некоторых элементах, оборачиваются в t.maybe.

Почему моё поле id — t.number, а не идентификатор?

Конвертер смотрит только на типы значений. Замените его на t.identifier или t.identifierNumber, если нужны ссылки или согласование по id.

Можно ли включить во ввод функции?

Ввод, не являющийся валидным JSON, разбирается как литерал объекта JavaScript, поэтому функциональные выражения становятся t.frozen. В этом режиме используется только первый элемент каждого массива, поэтому рекомендуется ввод в JSON.

Спецификации и справка