mobx-state-tree支持嵌套模型吗？

Question

我有一个父模型和一个状态-子模型，并且我希望在子模型中引用item.pdf.download()这样的操作。

我已经创建了一个解决方法：

const pdf = types.model({ state: ... })
const Item = types.model({ ... }).volatile(self => ({ pdf: pdf.create({ ... }) }))

但它看起来不像是预期的方式，

有没有办法在mobx-state-tree中做嵌套模块？

Answer 1

是的，事实上，所有不是原语的东西都需要是某个MST模型，才能成为更大模型的一部分

// Parent
const ItemModel = types.model({
  pdf: types.optional(PdfModel, {}),
  // or when the child needs an initial data not provided by the snapshot
  // pdf: types.optional(PdfModel, { state: 'initial' }),

  // It can ofcourse be a list (or map) of child types, default value is []
  relatedPdfs: types.array(PdfModel),
})
  .views(self => ({
    get downloaded() {
      return self.relatedPdfs.filter(pdf => pdf.state == 'complete');
    }
  }))
  .actions(self => ({
    async downloadAll() {
      const tasks = self.relatedPdfs.map(pdf => pdf.download());
      const results = await Promise.all(tasks);

      return results;
    }),
  }));

// Child
const PdfModel = types.model({
  state:  types.optional(types.enumeration(['initial', 'downloading', 'complete', 'error']), 'initial'),
  url: types.maybeNull(types.string),
})
  .volatile(self => ({
    data: null,
  })),
  .actions(self => ({
    download: flow(function * download(url = self.url) {
      self.state = 'downloading';
      
      try {
        const data = await downloadTheData(url);
        
        self.state = 'complete';
        self.data = data;
       
        return data;
      }
      catch(e) {
        self.state = 'error';
      }
    }),
  }));

可能出现的问题是，当您创建parent类型的实例时，您可能必须提供整个树的快照，或者通过types.optional()为任何子类型定义默认值，或者通过types.maybe允许undefined/null值

例如，如果我们没有子值的types.optional和type.maybeNull，我们就必须提供一个涵盖这一点的快照

  const snap = {
    pdf: { state: 'initial', url: 'http://example.com' },
  };

  const item = ItemModel.create(snap);

但是由于我们已经覆盖了默认值，所以我们不需要初始快照

 const item = ItemModel.create();

当然，您也可以提供快照来覆盖默认设置