JSONからMobX State Treeモデルへの変換器 — Numio

JSON スナップショットを MobX-State-Tree のモデル定義 const myModel = t.model({...}) に変換します。オブジェクトは t.model、配列は全要素から組み立てた t.array(...) になり、一部の要素で欠けているキーや null のキーは t.maybe や t.maybeNull になります。

既存の API レスポンスや保存済みスナップショットから store モデルのひな形を作る。

JSON

MobX-State-Tree Model

こんなときに使えます

既存の API レスポンスや保存済みスナップショットから store モデルのひな形を作る。
types.* の呼び出しをすべて手書きせずに、プレーンな observable の状態を MobX-State-Tree に移行する。

使い方

store の状態の JSON スナップショットを貼り付けます。
t.model({...}) の出力を確認します。オブジェクトの配列には、全要素からマージした 1 つのインライン t.model が入ります。
コピーして import { types as t } from "mobx-state-tree" を追加し、identifier、action、view を加えます。

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.array(t.union(t.number, t.string)) のように t.union を使います。

ID は types.identifier として検出されず、t.optional のデフォルト値、action、view も生成されません。

FAQ

JSON のルートは配列でもかまいませんか？

はい。結果は全要素のキーをマージした t.array(t.model({...})) になり、一部の要素にしかないキーは t.maybe で囲まれます。

id フィールドが identifier ではなく t.number になるのはなぜですか？

変換は値の型だけを見ます。id による参照や reconciliation が必要なら、t.identifier または t.identifierNumber に変更してください。

入力に関数を含められますか？

有効な JSON でない入力は JavaScript のオブジェクトリテラルとして解析されるため、関数式は t.frozen になります。このモードでは各配列の最初の要素しか使われないので、JSON での入力をおすすめします。

仕様を確認する

MobX-State-Tree: Types overview