Mobx状态树中的通用模型?

时间:2018-09-06 18:39:19

标签: reactjs mobx mobx-state-tree

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

示例

产品

  • 相机
  • 笔记本电脑

相机规格

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

笔记本电脑隔膜

  • 品牌
  • 行程尺寸
  • 操作系统
  • CPU内核数
  • 显示尺寸
  • 硬盘大小

我将有2个组成部分

  1. 过滤器组件
  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是否是解决此问题的正确方法,但我不是专家,所以我想看看它是否可以被使用。

1 个答案:

答案 0 :(得分:0)

使用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');
  }
}))