volatile deep observable

[trin4ik]

Hi. i use volatile for some ui logic, like loading status, render error from api response etc. sample:

volatile(self => ({
  promo: {
    loading: false,
    error: "",
  },
})).actions(self => ({
  setPromo: flow(function* setPromo () {
    self.promo.loading = true
    const result = yield axios.post('/promo')
    self.promo.loading = false
    if (result.error) {
      self.promo.error = result.error
    }
  })
}))

from documentation we know:

The volatile properties will be only observable, see [observable references](https://mobx.js.org/api.html#observableref). Values assigned to them will be unmodified and not automatically converted to deep observable structures.

i try use hack with types.model().create (#1232 (comment)) like

volatile(self => ({
  promo: types.model({
    loading: false,
    error: "",
  }).create(),
}))

but its not working. i mean with this code i have warnings like the object is protected and can only be modified by an action.

at now i use observable from mobx package:

volatile(self => ({
  promo: observable({
    loading: false,
    error: "",
  }),
}))

it works as expected, but is this the correct implementation?

[antondomratchev]

I think you want to change:

self.promo.loading = true

to

self.promo = {...self.promo, loading : true}

Alternatively you can use Object.assign() https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign