The necessity of making each property @observable

[sebastian-zarzycki-apzumi]

Supposedly I have my own domain object:

export class MySomething {
    property1 = 1;  
    property2 = 2;
    property3 = 3;
}

and a React component, that uses this object as @observable:

    @observable something = new MySomething();

and that component displays something.property1, something.property2 and so on.

I've noticed that if I change the value of one of the properties (i.e. upon click, or in timeout), the component does not re-render. It is only, when I mark each and every property of my model (so, property1, property2, etc.) as @observable, then it works correctly. Is that expected behavior (prototype-less object, vs boxed object, etc?). It seems a bit awkward to introduce annotations into domain objects that shouldn't really know anything about the rest of the application. Am I missing something here, or is it just the price to pay for being able to use them dynamically in React components with MobX?

[urugator]

domain objects that shouldn't really know anything about the rest of the application.

Yea, but the rest of your application has to know something about your domain object, oterwise there is no way to use it.
You have to expose some API which allows rest of the application to react to domain object changes.
For example, you could do that by making the domain object an event emitter and the rest of your app event listeners. In case of MobX you make the domain object observable and rest of your app observers.
The coupling, even though a loose one, exists no matter which solution you use.

[sebastian-zarzycki-apzumi]

Well, not necessarily. In AngularJS, you don't modify your domain objects, instead they exist in angular's scope, that manages the changes "externally", in a way. That's not exactly the same thing (as MobX makes them fully observable and that has benefits of its own), but still.

But anyway, I understand. I don't have a big issue with it. I just wanted to know that I'm doing this right, because I was under the impression that if I make an object observable, then all its properties will be, too. But I think it only works for {} objects (no prototype), and your general domain objects need to define observables on their own. Correct?

[mweststrate]

Yeah the thing is MobX doesn't want to mess with the internal state of things instantiated with a constructor, as there are probably many internal assumptions in the thing, and forcefully making stuff observable might cause all kind of issues. So I think making the properties you intend to be observable explicitly observable is the best approach. But, if you want to convert a complete object at once at your own digression, you could pull this trick: extendObservable(thing, thing)

[sebastian-zarzycki-apzumi]

Is it possible to do this with decorator?

[mweststrate]

This will probably do the trick:

function allObservable(target) {
  extendObservable(target, target)
  return target
}

@allObservable class Stuff {
  x = 3
}

[mweststrate]

Or open issue / PR here https://www.npmjs.com/package/mobx-decorators :)

[sebastian-zarzycki-apzumi]

Yeah, it would be nice to have it wrapped already in the package. But that code you've posted will do nicely, as well. Thank you!

[thunderkid]

@mweststrate:
I know this thread is a bit old now, but should your allObservable decorator above still work in Mobx5? It's giving me a runtime error of 'extendObservable' expects an object as first argument.

[urugator]

@thunderkid 3rd line: https://github.com/farwayer/mobx-decorators#readme

[lock]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs or questions.