Action used in another action

[varna]

How can I use action in another action?
If I use self, then I get an error: Property 'setViewState' does not exist on type.
My "best" solution for a singleton model is:

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

// @ts-ignore
export const MapModel = types
.model("Map",{
  longitude: types.number,
  latitude: types.number,
  zoom: types.number
})
.views(self => ({
  get viewState() {
    return getSnapshot(self)
  }
}))
.actions(self => ({
  setViewState(snapshot: SnapshotIn<typeof MapModel>) {
    applySnapshot(self, snapshot)
  },
  fitBounds(/** ... */) {
    model.setViewState(/** ... */)
  }
}))

const model = MapModel.create({
  longitude: -122.41669,
  latitude: 37.7853,
  zoom: 13,
})

export default model

1. What should I do with a simple model?
2. I have the same problems with getters. i.e. bbox view used in a fitBounds action. Or creating getter for area as number and then another getter that uses that area to create a string with units.

[EmilTholin]

Hi @varna!

This is discussed in length in the TypeScript and MST part of the documentation, and has a few solutions. I personally prefer splitting the .action block up into two separate blocks:

export const MapModel = types
  .model("Map", {
    longitude: types.number,
    latitude: types.number,
    zoom: types.number,
  })
  .views((self) => ({
    get viewState() {
      return getSnapshot(self);
    },
  }))
  .actions((self) => ({
    setViewState(snapshot: SnapshotIn<typeof MapModel>) {
      applySnapshot(self, snapshot);
    },
  }))
  .actions((self) => ({
    fitBounds(/** ... */) {
      self.setViewState(/** ... */);
    },
  }));

[varna]

Amazing. Sorry that I couldn't find that myself.

[EmilTholin]

No worries.