[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()

    expect(list.items[].price).toBe(28.73)

})

巴特西

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

最新文章

热门文章