[MST] Create Dynamic Types and use Type Composition to Extract Common Functionality

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")
)