Add a decorator for observable properties with action-wrapped setter

[mhr3]

Idea:

Currently if we want to use mobx's strict mode, we need to wrap any method that does the writing to an observable in an @action. This is all great as it shows the intent of the method and all, but it gets really frustrating when you have simple properties and suddenly need to implement custom setters or setFoo() methods which will be wrapped in an action.

Suppose we have this class:

class Foo {
  @observable prop: string;
}

we turn on strict and now setting the property must be wrapped in an action, so we do:

class Foo {
  private @observable _prop: string = null;
  public get prop(): string { return this._prop; }
  public set prop(value: string) { runInAction(() => { this._prop = value; }); }
}

(of course you could keep the property public, but then you're throwing away benefits of TS and just asking for a problem during the runtime)
Our neat and compact code just grew significantly and the more properties you have the worse it gets.

Instead, how about adding another decorator which would make it clear that setting the property will be wrapped in an action?

class Foo {
  @observable.actionable prop: string;
}

And yey, we're back to neat and compact code and can use strict mode. 🎉

• Do you think others will benefit from this change as well and it should in core package (see also mobx-utils)?
• Are you willing to (attempt) a PR yourself?

[hccampos]

This was discussed before. It is possible to use @computed in a setter and it will wrap it in an action.

That being said, having setters become actions is an anti-pattern imho. The property access should not be an action. Instead, the function or method that changes the property is the one that should be an action.

The only reason I can think of for wanting to wrap setters in @action is to be able to do two-way binding (or similar), which is a bad practice imho.

[mhr3]

The only reason I can think of for wanting to wrap setters in @action is to be able to do two-way binding (or similar), which is a bad practice imho.

I disagree, calling a setter can be equivalent to calling a method, is calling a setter from an event handler bad practice?

[hccampos]

Well, not really, but if you are calling the setter from the event handler, why not just make the event handler an action?

[mhr3]

Hadn't considered that, so far all our actions were kept in our store classes. Feels like breaking encapsulation if we were to annotate component event handlers with @action. But maybe that's just me.

[mweststrate]

Closing this as it is a duplicate of #839. Also note that a custom @box decorator is added to address this issue in one of the comments: #839 (comment)