Do we have something like a collection type (not array type) or serialize model

[nadeemkhedr]

In our project, we heavily use MST. We currently have an organization issue with types.array. Because of how things work in MST, the part model has all the views/actions that gets/sets items in these arrays. We want to move the logic to a new model.

An example will make the Issue easier to understand

Our data structure looks like this
.

{
  arrayType1: [...],
  arrayType2: [...],
}

Because of that, our MST model looks like this.

const CollectionModel = types
  .model('SceneModel', {
    arrayType1: types.array(Type1),
    arrayType2: types.array(Type2),
  })
  .views(self => {
    // multiple views for Type1
    // multiple views for Type2
  })
  .actions(self => {
    // multiple actions for Type1
    // multiple actions for Type2    
  })

The Issue: our CollectionModel is massive because all of the views/actions from different models

---

Our workaround: create ArrayType1Collection and ArrayType2Collection and change the CollectionModel to have these two as properties instead of types.array(Type1) and types.array(Type2)

The reason why we are not fans of this workaround is that it affects the final JSON output now, it will look like this:

{
  arrayType1Collection: { arrayType1: [...] },
  arrayType2Collection: { arrayType2: [...] },
}

Is there an easy way to create collection models without creating extra properties?

[EmilTholin]

Hi @nadeemkhedr!

If the big turnoff for the second approach you outline in your question is the changed JSON output, you could add a custom snapshotProcessor to have separate models for your views and actions, but have the JSON output be just arrays.

Example

import { getSnapshot, types } from "mobx-state-tree";

const modelToArrProcessor = {
  // from snapshot to instance
  preProcessor(snapshot) {
    return {
      arr: snapshot
    };
  },
  // from instance to snapshot
  postProcessor(instance) {
    return instance.arr;
  }
};

const Type1 = types.model({
  id: types.identifier
});

const ArrayType1Collection = types.snapshotProcessor(
  types
    .model({
      arr: types.array(Type1)
    })
    .views((self) => ({
      // multiple views for Type1
    }))
    .actions((self) => ({
      // multiple actions for Type1
    })),
  modelToArrProcessor
);

const Type2 = types.model({
  id: types.identifier
});

const ArrayType2Collection = types.snapshotProcessor(
  types
    .model({
      arr: types.array(Type2)
    })
    .views((self) => ({
      // multiple views for Type2
    }))
    .actions((self) => ({
      // multiple actions for Type2
    })),
  modelToArrProcessor
);

const CollectionModel = types.model("SceneModel", {
  arrayType1Collection: ArrayType1Collection,
  arrayType2Collectiony: ArrayType2Collection
});

const collectionModel = CollectionModel.create({
  arrayType1Collection: [],
  arrayType2Collectiony: []
});

console.log(getSnapshot(collectionModel));
// { arrayType1Collection: [], arrayType2Collectiony: [] }

[nadeemkhedr]

Ty sir!