zoukankan      html  css  js  c++  java
  • [MST] Create Dynamic Types and use Type Composition to Extract Common Functionality

    Since MST offers a runtime type system, it can create and compose types on the fly, making it possible to reuse logic in new and powerful ways.

    In this lesson you will learn:

    • That MST types are immutable and composed together behind the scenes
    • How to compose types explicitly by using types.compose
    • How to create dynamic, parameterized types by leveraging that MST types are first class javascript citizens
    import { types, flow, getSnapshot, onSnapshot } from "mobx-state-tree"
    
    export function createStorable(collection, attribute) {
        return types.model({}).actions(self => ({
            save: flow(function* save() {
                try {
                    yield window.fetch(`http://localhost:3001/${collection}/${self[attribute]}`, {
                        method: "PUT",
                        headers: { "Content-Type": "application/json" },
                        body: JSON.stringify(getSnapshot(self))
                    })
                } catch (e) {
                    console.error("Uh oh, failed to save: ", e)
                }
            }),
            afterCreate() {
                onSnapshot(self, self.save)
            }
        }))
    }
    import { types, flow, getParent, applySnapshot, getSnapshot, onSnapshot } from "mobx-state-tree"
    
    import { WishList } from "./WishList"
    import { createStorable } from "./Storable"
    
    const User = types.compose(
        types
            .model({
                id: types.identifier(),
                name: types.string,
                gender: types.enumeration("gender", ["m", "f"]),
                wishList: types.optional(WishList, {}),
                recipient: types.maybe(types.reference(types.late(() => User)))
            })
            .actions(self => ({
                getSuggestions: flow(function* getSuggestions() {
                    const response = yield window.fetch(
                        `http://localhost:3001/suggestions_${self.gender}`
                    )
                    self.wishList.items.push(...(yield response.json()))
                })
            })),
        createStorable("users", "id")
    )
  • 相关阅读:
    java类实现 指定网站信息采集
    通过jxl.jar 读取、导出excel的小例子
    SQL使用CASE WHEN THEN
    动态查询的实现
    Oracle 查询存储过程 做横向报表
    文本信息 生成二维码 例子
    将对象转换为指定的Map
    eclipse 插件大全
    让人看了舒服的清爽颜色搭配CSS
    spring 定时任务 实现
  • 原文地址:https://www.cnblogs.com/Answer1215/p/8396711.html
Copyright © 2011-2022 走看看