Converter JSON em modelos MobX State Tree — Numio
Converte um snapshot JSON em uma definição de modelo MobX-State-Tree, const myModel = t.model({...}). Objetos viram t.model, arrays t.array(...) construído a partir de todos os itens, e chaves ausentes ou null em alguns itens viram t.maybe ou t.maybeNull.
Criar a base do modelo de uma store a partir de uma resposta de API existente ou de um snapshot salvo.
JSON
MobX-State-Tree Model
Quando usar
- Criar a base do modelo de uma store a partir de uma resposta de API existente ou de um snapshot salvo.
- Migrar estado observable simples para MobX-State-Tree sem escrever cada chamada types.* à mão.
Como usar
- Cole um snapshot JSON do estado da sua store.
- Confira a saída t.model({...}); arrays de objetos contêm um único t.model inline mesclado a partir de todos os itens.
- Copie-a, adicione import { types as t } from "mobx-state-tree" e depois adicione identificadores, actions e views.
Snapshot JSON
{
"filter": "all",
"selectedId": null,
"todos": [
{ "id": 1, "title": "Write docs", "done": false, "tags": ["work"] },
{ "id": 2, "title": "Ship", "done": true, "dueAt": null }
]
}Modelo 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()),
}),
),
})Detalhes e limitações
Roda em um Web Worker do navegador; nada é enviado. A saída é formatada com Prettier.
null ao lado de um valor real gera t.maybeNull(type); um valor que é sempre null, e os itens de um array vazio, viram t.frozen(), que aceita qualquer valor serializável.
Chaves ausentes em alguns itens de um array viram t.maybe(...). Arrays de tipos mistos usam t.union, como t.array(t.union(t.number, t.string)).
IDs não são detectados como types.identifier, e não são gerados padrões t.optional, actions nem views.
FAQ
A raiz do JSON pode ser um array?
Sim. O resultado vira t.array(t.model({...})) com as chaves de todos os elementos mescladas; chaves ausentes em alguns elementos ficam envolvidas em t.maybe.
Por que meu campo id é t.number e não um identifier?
O conversor só olha os tipos dos valores. Mude para t.identifier ou t.identifierNumber se precisar de referências ou reconciliação por id.
Posso incluir funções na entrada?
Uma entrada que não é JSON válido é interpretada como um literal de objeto JavaScript, então expressões de função viram t.frozen. Nesse modo só o primeiro item de cada array é usado, por isso a entrada JSON é recomendada.