Since MST offers a runtime type system, it can create and compose types on the fly, making it possible to reuse logic in new and powerful ways.
In this lesson you will learn:
- That MST types are immutable and composed together behind the scenes
- How to compose types explicitly by using
types.compose
- How to create dynamic, parameterized types by leveraging that MST types are first class javascript citizens
import { types, flow, getSnapshot, onSnapshot } from "mobx-state-tree" export function createStorable(collection, attribute) { return types.model({}).actions(self => ({ save: flow(function* save() { try { yield window.fetch(`http://localhost:3001/${collection}/${self[attribute]}`, { method: "PUT", headers: { "Content-Type": "application/json" }, body: JSON.stringify(getSnapshot(self)) }) } catch (e) { console.error("Uh oh, failed to save: ", e) } }), afterCreate() { onSnapshot(self, self.save) } })) }
import { types, flow, getParent, applySnapshot, getSnapshot, onSnapshot } from "mobx-state-tree" import { WishList } from "./WishList" import { createStorable } from "./Storable" const User = types.compose( types .model({ id: types.identifier(), name: types.string, gender: types.enumeration("gender", ["m", "f"]), wishList: types.optional(WishList, {}), recipient: types.maybe(types.reference(types.late(() => User))) }) .actions(self => ({ getSuggestions: flow(function* getSuggestions() { const response = yield window.fetch( `http://localhost:3001/suggestions_${self.gender}` ) self.wishList.items.push(...(yield response.json())) }) })), createStorable("users", "id") )