In this lesson, we introduce the running example of this course, a wishlist app. We will take a look at the core of mobx-state-tree (MST), models. Models describe the shape of your state and perform type validation.

You will learn:

  • Defining models using types.Model
  • Instantiating models from JSON using Model.create
  • Primitive types: types.string & types.number
  • Type inference for primitive types
  • types.array
  • types.optional
  • Composing models into a model tree
  • Testing models using jest

To create a model:

import { types } from "mobx-state-tree"

export const WishListItem = types.model({
name: types.string,
price: types.number,
image: ""
}) export const WishList = types.model({
items: types.optional(types.array(WishListItem), [])
})

'types' is similar to React PropTypes.

Once model is created, then we can write tests to verify:

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("")
}) 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()
expect(list.items[].price).toBe(28.73)
})

[MST] Describe Your Application Domain Using mobx-state-tree(MST) Models的更多相关文章

  1. [MST] Create an Entry Form to Add Models to the State Tree

    It is time to add new entries to the wishlist. We will achieve this by reusing forms and models we'v ...

  2. 应用程序域(Application Domain)

    应用程序域为隔离正在运行的应用程序提供了一种灵活而安全的方法. 应用程序域通常由运行时宿主创建和操作. 有时,您可能希望应用程序以编程方式与应用程序域交互,例如想在不停止应用程序运行的情况下卸载某个组 ...

  3. 应用程序池和应用程序域的区别(Difference between application pool and application domain)

    来自StackOverFlow:  http://stackoverflow.com/questions/8486335/difference-between-an-application-domai ...

  4. 【AtCoder3611】Tree MST(点分治,最小生成树)

    [AtCoder3611]Tree MST(点分治,最小生成树) 题面 AtCoder 洛谷 给定一棵\(n\)个节点的树,现有有一张完全图,两点\(x,y\)之间的边长为\(w[x]+w[y]+di ...

  5. BZOJ 1977: [BeiJing2010组队]次小生成树 Tree( MST + 树链剖分 + RMQ )

    做一次MST, 枚举不在最小生成树上的每一条边(u,v), 然后加上这条边, 删掉(u,v)上的最大边(或严格次大边), 更新答案. 树链剖分然后ST维护最大值和严格次大值..倍增也是可以的... - ...

  6. 题解-AtCoder Code-Festival2017 Final-J Tree MST

    Problem \(\mathrm{Code~Festival~2017~Final~J}\) 题意概要:一棵 \(n\) 个节点有点权边权的树.构建一张完全图,对于任意一对点 \((x,y)\),连 ...

  7. 最小生成树 (Minimum Spanning Tree,MST) --- Prim算法

    本文链接:http://www.cnblogs.com/Ash-ly/p/5409904.html 普瑞姆(Prim)算法: 假设N = (V, {E})是连通网,TE是N上最小生成树边的集合,U是是 ...

  8. 最小生成树 (Minimum Spanning Tree,MST) --- Kruskal算法

    本文链接:http://www.cnblogs.com/Ash-ly/p/5409265.html 引导问题: 假设要在N个城市之间建立通信联络网,则连通N个城市只需要N - 1条线路.这时,自然会考 ...

  9. 【AT3611】Tree MST

    题目 这个题的输入首先就是一棵树,我们考虑一下点分 我们对于每一个分治重心考虑一下跨过这个分治重心的连边情况 就是把当前分治区域内所有的点向距离分治重心最近的点连边 考虑一下这个算法的正确性,如果我们 ...

随机推荐

  1. Android开发进度07

    1,今日:目标:完成记账功能 2,昨天:账单的增删改查方法 3,收获:无 4,问题:SQLite表单出现问题,提交后软件直接退出

  2. pytorch 6 batch_train 批训练

    import torch import torch.utils.data as Data torch.manual_seed(1) # reproducible # BATCH_SIZE = 5 BA ...

  3. Python 爬虫练习: 爬取百度贴吧中的图片

    背景:最近开始看一些Python爬虫相关的知识,就在网上找了一些简单已与练习的一些爬虫脚本 实现功能:1,读取用户想要爬取的贴吧 2,读取用户先要爬取某个贴吧的页数范围 3,爬取每个贴吧中用户输入的页 ...

  4. POI实现Excel2003插入多张图片

    POI的操作Excel时,不可避免有操作图片的处理.怎么插入图片呢?网上也有不少介绍. 下面的代码是向Excel中插入多张图片的例子: public static void main(String[] ...

  5. EOSS V3.0.2 企业运营支撑系统(基于RBAC原理的权限管理)

    下载地址:https://github.com/jelly-liu/EOSS 一:EOSS 功能介绍 其于用户,角色,权限,资源(即菜单)的一套"简约有用"的权限管理系统,可在其基 ...

  6. [Gatsby] Install Gatsby and Scaffold a Blog

    In this lesson, you’ll install Gatsby and the plugins that give the default starter the ability to t ...

  7. OPENWRT中SSH免密钥登陆(具体步骤)

    通过使用ssh-keygen生成公钥,在两台机器之间互相建立新人通道极客. 如果本地机器是client,远程机器为server. 1.使用ssh-keygen生成rsa keygen(在这里会覆盖曾经 ...

  8. POJ 3469 Dinic (二元关系)

    题意: 思路: //By SiriusRen #include <queue> #include <cstdio> #include <cstring> using ...

  9. 基于Asp.Net webApi owin oauth2的实现

    干货地址:https://git.oschina.net/DpMa_/WebApi-Owin-oauth2

  10. Windbg调试托管代码

    Windbg调试.net托管代码需要借助于SOS.dll,.Net 4.0的32位sos.dll的路径在C:\Windows\Microsoft.NET\Framework\v4.0.30319,64 ...