Enforce having a getter combined with an action in a convenient way

[williwyg]

Hi, I am new to Mobx coming from a different State management lib. What I like about Mobx is the pattern to only set an observable with an action. What I dislike hower that I am still able to set my observable directly in code without my code editor complaining about this.

I wonder if there is already a solution in place to prevent this from happening.

I came up with a solution myself creating a class that has a private observable and public computed and action to access the private observable but I am not sure if this has performance implications.

export class ObservableProperty<TValue>{
    constructor(initialValue?: TValue, setter?: (newValue: TValue, observableProperty: ObservableProperty<TValue>) => void) {

        this._value = initialValue;

        this.set = (newValue: TValue, triggerSetter: boolean = true) => {
            if (setter && triggerSetter) {
                setter(newValue, this)
            } else {
                this._value = newValue
            }
        }

        makeObservable<ObservableProperty<TValue>, "_value">(
            this,
            {
                _value: observable,
                value: computed,
                set: action
            }
        )
    }

    private _value: TValue;

    public get value() {
        return this._value;
    }

    public set: (newValue: TValue, triggerSetter?: boolean) => void;
}

This class can than be used to define properties in viewModels. The firstName then has a "value" getter to bind to and a "set" method to update the value.

export class MyViewModel{

       firstName= new ObservableProperty<string>("willy");

}

[mweststrate]

You can drop the value: computed as that is pure overhead (memoizing) without adding anything as it doesn't prevent any computations, so just a plain getter would suffice.

Note that observable.box(3) will give you almost the exact API except that you have to call .get(): https://mobx.js.org/api.html#observablebox

Actions can be enforced at runtime through https://mobx.js.org/configuration.html#enforceactions, but you have probably already seen that

[williwyg]

Hi Michel,

Thanks for the quick answer.

Could you please explain to me why it is not necessary to make the getter computed. Will the subscribers to the getter still be notified even if the getter is not explicitely marked as computed. Then why does the example in the documentation "Deriving information with computeds" make the getter "total" computed. What is the difference here?

[mweststrate]

In MobX tracking happens anytime you access something sychronously. But it isn't necessarily to access it directly. Accessing observables through 17 intermediate functions is tracked just as fine.

Say you have have component X reading value. With a computed you'd get a dependency tree like X -> value -> _value.

Without computed it'd become X -> _value. Since any time _value changes, value would change as well, and there is not an expensive computation saved either, the added value node doesn't save any computation. It'd be the same as doing const y = useMemo(() => x, [x]) in React.