zoukankan      html  css  js  c++  java
  • [MST] Derive Information from Models Using Views

    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) });
  • 相关阅读:
    数组的typedef 和函数的typedef
    函数返回值当左值的问题
    C++中虚析构函数的作用
    word2013密钥
    子类父类步长问题
    函数重定义——重写———重载
    C++的成员初始化列表和构造函数体(以前未知)
    常引用
    项目开发中的字符串模型
    指针函数的++(极易犯错误)
  • 原文地址:https://www.cnblogs.com/Answer1215/p/8343778.html
Copyright © 2011-2022 走看看