Mobx 状态树中的通用模型？答案

【问题标题】：Generic Model in Mobx State Tree?Mobx 状态树中的通用模型？
【发布时间】：2019-02-12 02:04:25
【问题描述】：

我将拥有多个具有不同“规格”的“产品”

例子

产品

相机
笔记本电脑

相机规格

数码相机百万像素
品牌
光学变焦

笔记本电脑配件

品牌
内存大小
操作系统
CPU 核心数
显示尺寸
硬盘大小

我将有 2 个组件

过滤器组件
搜索结果

过滤器组件将是该产品所有可用过滤器的列表。

搜索结果将是用户过滤结果后返回的结果，并向他们显示找到的每种产品的一些规格。

我正在使用 Mbox 状态树，但我不知道如何存储从服务器返回的“产品”，因为每个产品都有不同的属性。

我猜我可能会为每种类型制作一个模型

  .model({
    id: types.identifierNumber,
    Brand: types.string,
    OpticalZoom: types.string,
    MegaPixels: types.string,
  })

  .model({
    id: types.identifierNumber,
    Brand: types.string,
    RamSize: types.string,
    Os: types.string,
    Cores: types.string,
    Display: types.string,
   HarddriveSize: types.string,
  })

但现在我不知道如何访问我的组件中的 2 个不同模型，因为它会绑定到这些模型。

我可以制作 1 个巨大的模型，但我对这个想法并不疯狂，因为许多属性不会被使用。

我必须考虑的另一件事是，用户可以单击其中一个结果，然后转到另一个页面并显示所有详细信息。我可能会使用 MST 参考来访问它，如果我制作所有单独的模型，我将无法做到这一点。

任何建议，对我来说，我认为我需要更多的 json 或更动态的东西，所以我不确定 MST 是否是正确的解决方案，但我不是这方面的专家，所以我想看看它是否可以使用。

【问题讨论】：

你可以查看 types.union。例如：产品：types.array(types.union(CameraModel, LaptopModel))
hmm 很有趣，我想我必须做很多“is”检查才能看到我正在处理的类型。我想到的另一种方法是“规格”数组，一个字段是properyName，另一个是“值”，但我还没有想太多。将不得不比较什么是更好的选择。

标签： reactjs mobx mobx-state-tree

【解决方案1】：

使用types.union(Camera, Laptop)。每个类型的类别（或类型）类型键。然后使用视图获取特定类型。

const Camera = model({
  type: literal('camera')
});
const Laptop = model({
  type: literal('laptop')
});

const Data = model({
  products: array(union(Camera, Laptop))
})
.views( self => ({
  get cameras() {
    return self.products.filter( p => p.type === 'camera');
  },
  get laptops() {
    return self.products.filter( p => p.type === 'laptop');
  }
}))

【讨论】：