[MST] Attach Behavior to mobx-state-tree Models Using Actions

Models are not just a nifty feature for type checking. They enable you to attach behavior to your actions in a straightforward and highly discoverable way

In this lesson, you will learn:

How to define actions on models

How to avoid

this

issues by using self

Models can only be modified using actions, and are further read-only from the outside

Action is the only way to update model, model is designed to be am immutable object. Even you use 'push', 'splice' in the actions, it won't affect.

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

export const WishListItem = types
.model({
name: types.string,
price: types.number,
image: ""
})
.actions(self => ({
changeName(newName) {
self.name = newName
},
changePrice(newPrice) {
self.price = newPrice
},
changeImage(newImage) {
self.image = newImage
}
}))

export const WishList = types
.model({
items: types.optional(types.array(WishListItem), [])
})
.actions(self => ({
add(item) {
self.items.push(item)
}
}))

Test:

import { getSnapshot, onSnapshot, onPatch } from "mobx-state-tree"
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("")
item.changeName("Narnia")
expect(item.name).toBe("Narnia")
})

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

it("can add new items", () => {
const list = WishList.create()
list.add(
WishListItem.create({
name: "Chesterton",
price: 10
})
)

expect(list.items.length).toBe(1)
expect(list.items[0].name).toBe("Chesterton")
list.items[0].changeName("Book of G.K. Chesterton")
expect(list.items[0].name).toBe("Book of G.K. Chesterton")
})

in the test, we do 'WishListIem.create':

it("can add new items", () => {
const list = WishList.create()
list.add(
WishListItem.create({
name: "Chesterton",
price: 10
})
)

expect(list.items.length).toBe(1)
expect(list.items[0].name).toBe("Chesterton")
list.items[0].changeName("Book of G.K. Chesterton")
expect(list.items[0].name).toBe("Book of G.K. Chesterton")
})

Since we already defined that each item should be a WishListItem in the model, therefore, we can skip 'WishListIem.create':

list.add({
name: "Chesterton",
price: 10
})