A useful type: map entities to properties

[OnkelTem]

Imagine we have a list of units:

export const unitModel = types.model({
  id: types.identifier,
  name: types.string,
})

Now on a product entity we need to map some units to weights:

export const productModel = types.model({
  id: types.identifier,
  name: types.string,
  servings: types.array(types.model({
    unit: types.reference(unitModel),
    weight: types.number,
  }))
})

The obvious problem with this approach is that array can have more than one same unit.

It would be better to use unit.id as indices, like what types.map() does, but it doesn't allow to add more properties and instead contains the same units as values.

I don't find an appropriate type to achieve this right now. Maybe I'm missing something?

I'd imagine that a new type could do what such operation suggests: mapping a set of things to a set of other things. E.g.

servings: types.mapWithProps(unitModel, type.model({...}))
// Or
servings: types.mapTo(unitModel, type.model({...}))

Ideas?

Workaround

Currently I'm gonna use something like this:

...
   servings: types.map(
      types.model({
        unit: types.reference(unitModel),
        weight: types.number,
      })
    ),
  })
  .actions((self) => ({
    addServing(unit: Instance<typeof unitModel>, weight: number) {
      self.servings2.set(unit.id, { unit, weight })
    },

for what it's worth

[coolsoftwaretyler]

I'm not sure I understand the issue you're describing. If I do this:

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

export const unitModel = types.model({
  id: types.identifier,
  name: types.string,
});

export const productModel = types.model({
  id: types.identifier,
  name: types.string,
  servings: types.array(
    types.model({
      unit: types.reference(unitModel),
      weight: types.number,
    })
  ),
});

const StoreModel = types.model({
  units: types.array(unitModel),
  product: productModel,
});

const store = StoreModel.create({
  units: [
    { id: "1", name: "1" },
    { id: "2", name: "2" },
  ],
  product: {
    id: "1",
    name: "product",
    servings: [
      {
        unit: "1",
        weight: 1,
      },
      {
        unit: "1",
        weight: 2,
      },
      {
        unit: "2",
        weight: 3,
      },
    ],
  },
});

console.log("first serving, unit 1");
console.log(store.product.servings[0].unit); // logs out the { id: '1', name: '1' }
console.log("second serving, unit 1");
console.log(store.product.servings[1].unit); // logs out { id: '1', name: '1' }
console.log("third serving, unit 2");
console.log(store.product.servings[2].unit); // logs out { id: '2', name: '2' }

CodeSandbox

What do you want to happen instead?

[OnkelTem]

servings: types.map(
    types.model({
      unit: types.reference(unitModel),
      weight: types.number,
    })
  ),

Yeah¸ this is what I meant in the "Workaround" section.

I was more referring to JS native Map. So it could look something like:

const productModel = types.model({
  id: types.identifier,
  name: types.string,
  servings: types.jsMap(types.reference(unitModel), types.number)
})
  .actions((self) => ({
    addServing(unit: Unit, weight: number) {
      (self.servings as Map<Unit, number>).set(unit, weight)
    },
  }))

[coolsoftwaretyler]

What would be the difference between types.jsMap and types.map?

[OnkelTem]

jsMap would implement observable JavaScript Map with objects as keys i.e:

$ node
> const obj1 = { id: 1 }
undefined
> const obj2 = { id: 2 }
undefined
> const map = new Map()
undefined
> map.set(obj1, "value1")
Map(1) { { id: 1 } => 'value1' }
> map.set(obj2, "value2")
Map(2) { { id: 1 } => 'value1', { id: 2 } => 'value2' }
> map.get(obj1)
'value1'

I'm not sure if mobx support this. Need to check.

[OnkelTem]

Ok, I investigated this further a little and this is what I got.

MobX supports objects as keys. E.g. this is ok:

const sugar = observable.object({
  servings: observable.map<Unit, number>([
    [{ id: 1, name: "tea spoon" }, 5],
    [{ id: 2, name: "table spoon" }, 10],
  ])
});

so we index servings map with unit objects.

We could also do this:

const sugar = makeAutoObservable({
  servings: new Map<Unit, number>([
    [{ id: 1, name: "tea spoon" }, 5],
    [{ id: 2, name: "table spoon" }, 10],
  ])
});

Looks like sugar.servings becomes an indirect observable.map.

However, when it comes to mobx-state-tree, we cannot use objects to index maps:

const productModel = types
  .model({
    servings: types.map(types.number),
  })
  .actions((self) => ({
    addServing: (unit: Instance<typeof unitModel>, weight: number) => {
      self.servings.set(unit, weight)
      //                ^^^^ error: not assignable to parameter of type 'string | number'
    },
  })) 

I believe this is prohibited because there is no way to serializes key-object normally.

With this, I withdraw my request :)

Thanks, Tyler.

[coolsoftwaretyler]

Sounds good! Keep in mind that all MobX is compatible with MST to some degree. You could always store a MobX array as volatile state and use it inside an MST tree. You won't get the serialization, but you can get some observability as well.