[MST] Remove Model Instances from the Tree

In this lesson we will dive a bit more into the tree semantics of MST.

In this lesson you will learn:

Actions can only modify their own subtree
The use of getParent to find the parent of a model instance
Using destroy to remove an instance entirely from the tree

The whole point for removing data from model is call 'destroy', sometime you might need 'getParent' if the data you want to remove is not in current tree node.

import { types, getParent, destroy } 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

        },

        remove() {

            getParent(self, 2).remove(self)

        }

    }))

export const WishList = types

    .model({

        items: types.optional(types.array(WishListItem), [])

    })

    .actions(self => ({

        add(item) {

            self.items.push(item)

        },

        remove(item) {

            destroy(item)

        }

    }))

    .views(self => ({

        get totalPrice() {

            return self.items.reduce((sum, entry) => sum + entry.price, 0)

        }

    }))

巴特西

[MST] Remove Model Instances from the Tree

最新文章

热门文章