[MST] Describe Your Application Domain Using mobx-state-tree(MST) Models

In this lesson, we introduce the running example of this course, a wishlist app. We will take a look at the core of mobx-state-tree (MST), models. Models describe the shape of your state and perform type validation.

You will learn:

• Defining models using types.Model
• Instantiating models from JSON using Model.create
• Primitive types: types.string & types.number
• Type inference for primitive types
• types.array
• types.optional
• Composing models into a model tree
• Testing models using jest

 

To create a model:

import { types } from "mobx-state-tree"

export const WishListItem = types.model({
    name: types.string,
    price: types.number,
    image: ""
})

export const WishList = types.model({
    items: types.optional(types.array(WishListItem), [])
})

'types' is similar to React PropTypes.

 

Once model is created, then we can write tests to verify:

import { WishList, WishListItem } from "./WishList"

it("can create a instance of a model", () => {
    const item = WishListItem.create({
        name: "Chronicles of Narnia Box Set - C.S. Lewis",
        price: 28.73
    })

    expect(item.price).toBe(28.73)
    expect(item.image).toBe("")
})

it("can create a wishlist", () => {
    const list = WishList.create({
        items: [
            {
                name: "Chronicles of Narnia Box Set - C.S. Lewis",
                price: 28.73
            }
        ]
    })

    expect(list.items.length).toBe(1)
    expect(list.items[0].price).toBe(28.73)
})