[MST] Derive Information from Models Using Views

Posted 2020-10-22 Answer1215

Redundant data or caching data is a constant source of bugs. MST adheres to the philosophy that no data that can be derived should ever get stored. In this lesson, you will learn how to introduce views that declaratively derive data and which cache data smartly.

In this lesson you will learn:

• How to introduce views on models
• That computed properties are powered by Mobx computed fields
• How to combine MST with Mobx utilities like reaction

To learn more about MobX basics check out my course, Manage Complex State in React Apps with MobX

 

Inside ‘views‘, you can do calculation based on the model:

export const WishList = types
    .model({
        items: types.optional(types.array(WishListItem), [])
    })
    .actions(self => ({
        addItem(newItem) {
            // Model is immutable object, it is ok to do push here.
            self.items.push(newItem);
        }
    }))
    .views(self => ({
        get totalPrice() {
            return self.items.reduce((acc, curr) => curr.price + acc, 0)
        }
    }));

 

import {WishList, WishListItem} from "./WishList"
import {reaction} from ‘mobx‘

it(‘should calculate the total price of a wishlist‘, function () {
    let changes = 0;
    const list = WishList.create();
    reaction(() => list.totalPrice, () => changes++)
    list.addItem({
        name: ‘Amazon‘,
        price: 30
    });
    expect(list.totalPrice).toEqual(30);
    expect(changes).toEqual(1)
    list.addItem({
        name: ‘DJ‘,
        price: 12
    });
    expect(list.totalPrice).toEqual(42);
    expect(changes).toEqual(2)

    list.items[0].changePrice(28);
    expect(list.totalPrice).toEqual(40);
    expect(changes).toEqual(3)

    list.items[0].changeName("Amazon cn");
    expect(changes).toEqual(3)
});