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
            })
  • 相关阅读:
    django regroup的相关知识点
    python学习
    python os的一点心得
    python字符串替换的2种有效方法
    python的缩进格式真的不好吗?
    django的哲学很耐人回味
    python 抓取网页的方法
    分享一点python 编码设置的知识
    python apply的一点知识
    今天休息真舒服
  • 原文地址:https://www.cnblogs.com/Answer1215/p/8337683.html
Copyright © 2011-2022 走看看