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
            })
  • 相关阅读:
    Openresty+redis实现灰度发布
    Nginx keepalived
    Nginx反向代理、负载均衡、动静分离、缓存、压缩、防盗链、跨域访问
    MYCAT扩容
    MYCAT全局序列
    MYCAT分库分表
    MySQL主从复制
    [redis] linux下集群篇(4) docker部署
    [nginx] CORS配置多域名
    [mysql] 归档工具pt-archiver,binlog格式由mixed变成row
  • 原文地址:https://www.cnblogs.com/Answer1215/p/8337683.html
Copyright © 2011-2022 走看看