Convertir JSON a modelos de MobX State Tree — Numio
Convierte un snapshot JSON en una definición de modelo de MobX-State-Tree, const myModel = t.model({...}). Los objetos pasan a t.model, los arrays a t.array(...) construido a partir de todos los elementos, y las claves que faltan o son null en algunos elementos a t.maybe o t.maybeNull.
Arrancar el modelo de un store a partir de una respuesta de API existente o de un snapshot guardado.
JSON
MobX-State-Tree Model
Cuándo usarla
- Arrancar el modelo de un store a partir de una respuesta de API existente o de un snapshot guardado.
- Pasar estado observable simple a MobX-State-Tree sin escribir a mano cada llamada types.*.
Cómo usarla
- Pega un snapshot JSON del estado de tu store.
- Revisa la salida t.model({...}); los arrays de objetos contienen un único t.model en línea fusionado a partir de todos los elementos.
- Cópialo, añade import { types as t } from "mobx-state-tree" y luego añade identificadores, actions y 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 de 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()),
}),
),
})Detalles y limitaciones
Se ejecuta en un Web Worker del navegador; no se sube nada. La salida se formatea con Prettier.
null junto a un valor real da t.maybeNull(type); un valor que solo es null, y los elementos de un array vacío, pasan a t.frozen(), que acepta cualquier valor serializable.
Las claves que faltan en algunos elementos de un array pasan a t.maybe(...). Los arrays de tipos mixtos usan t.union, como t.array(t.union(t.number, t.string)).
Los IDs no se detectan como types.identifier, y no se generan valores por defecto t.optional, actions ni views.
FAQ
¿La raíz del JSON puede ser un array?
Sí. El resultado pasa a t.array(t.model({...})) con las claves de todos los elementos fusionadas; las claves que faltan en algunos elementos se envuelven en t.maybe.
¿Por qué mi campo id es t.number y no un identifier?
El conversor solo mira los tipos de los valores. Cámbialo a t.identifier o t.identifierNumber si necesitas referencias o reconciliación por id.
¿Puedo incluir funciones en la entrada?
Una entrada que no es JSON válido se parsea como un literal de objeto de JavaScript, así que las expresiones de función pasan a t.frozen. En ese modo solo se usa el primer elemento de cada array, por lo que se recomienda una entrada JSON.