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

MobX状态管理实践

最新推荐文章于 2024-07-18 10:49:45 发布

转载最新推荐文章于 2024-07-18 10:49:45 发布 · 137 阅读

本文介绍如何使用MobX State Tree定义不可变模型，并通过动作(action)更新状态。演示了创建模型实例、更改属性值及向模型中添加新项的过程。

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