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) });
  • 相关阅读:
    第四章 瓦解无意识
    C#操作Sqlite快速入门及相关工具收集(转)
    为什么要反应?你的惯性反应模式是什么?
    NPOI 1.2简介和教程目录
    jquery 得到当前页面高度和宽度
    第十一章 不勾招世界
    关于使用HtmlAgilityPack
    C# 网页图片采集
    互联网协议入门(转)
    对技术的态度(转)
  • 原文地址:https://www.cnblogs.com/Answer1215/p/8343778.html
Copyright © 2011-2022 走看看