تحويل JSON إلى نماذج MobX State Tree — Numio

يحوّل لقطة JSON إلى تعريف نموذج MobX-State-Tree، const myModel = t.model({...}). تصبح الكائنات t.model، والمصفوفات t.array(...) مبنية من كل العناصر، والمفاتيح المفقودة أو التي قيمتها null في بعض العناصر t.maybe أو t.maybeNull.

إنشاء نموذج store أولي من استجابة API موجودة أو لقطة محفوظة.

JSON

MobX-State-Tree Model

متى تستخدمها

إنشاء نموذج store أولي من استجابة API موجودة أو لقطة محفوظة.
نقل حالة observable بسيطة إلى MobX-State-Tree دون كتابة كل استدعاء types.* يدويًا.

طريقة الاستخدام

الصق لقطة JSON لحالة الـ store.
راجع ناتج t.model({...})؛ تحتوي مصفوفات الكائنات على t.model مضمّن واحد مدمج من كل العناصر.
انسخه، وأضف 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)).

لا تُكتشف المعرّفات كـ 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.

المواصفات والمراجع

MobX-State-Tree: Types overview