zoukankan      html  css  js  c++  java
  • [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
            })
  • 相关阅读:
    文件系统
    MySQL中添加唯一约束和联合唯一约束
    Ubuntu(Debian)的aptitude与apt-get的区别和联系
    透明与Z序示例
    Qt Quick分组属性案例
    TextView 设置超过几行后显示省略号
    ionic list item-radio checked
    webkit的基本应用
    信号槽操作案例
    报错:tr was not declared in this scope
  • 原文地址:https://www.cnblogs.com/Answer1215/p/8337683.html
Copyright © 2011-2022 走看看