makeAutoObservable defining class prototype functions with arguments as actions?

[solugebefola]

When linting in "strict" mode, I'm continually getting this warning:

Since strict-mode is enabled, changing (observed) observable values without using an action is not allowed.

for functions defined on classes. Ex: (edited)

const class FooStore {
  someObservableValue = 10;
  constructor() {
    makeAutoObservable(this);
  }

  changeObservableValue(value) {
    this.someObservableValue = value;
  }
}

According to the docs, makeAutoObservable should make changeObservableValue into an action, but that appears not to be the case? The only thing I can think of is that a function that takes an argument is not defined as an action, since none of the examples in the docs show a function in the prototype that takes arguments, but I couldn't find anywhere that it was explicitly noted.

Sorry if this is completely obvious, but I'm a bit stymied.

[kubk]

Keyword function shouldn't be there, it's invalid syntax. Regular class methods that take arguments are usually converting into actions with no issues. Can you reproduce the issue here: https://codesandbox.io/s/minimal-mobx-react-project-ppgml?file=/index.js

[solugebefola]

Sorry, example above was off the top of my head. My actual code doesn't use function. Edited to adjust. I will try to reproduce with the link you posted

[ygnoh]

In class, like this function declaration is a prototype method, not an instance method:

  changeObservableValue(value) {
    this.someObservableValue = value;
  }

It's about Javascript, not MobX.

To make it work as you expect, it should be an instance method so use arrow function:

  changeObservableValue = (value) => {
    this.someObservableValue = value;
  }

Or assign to a field in the constructor:

constructor() {
  this.changeObservableValue = (value) => {
    this.someObservableValue = value;
  };

  makeAutoObservable(this);
}

[solugebefola]

From the mobx docs on makeAutoObservable https://mobx.js.org/observable-state.html#makeautoobservable

All functions on prototype become autoAction

so I don't think that's the problem, but it's a good suggestion

[kubk]

@solugebefola Did you manage to reproduce the issue in codesandbox?

[mweststrate]

Verify that field initializers are configured correctly in TypeScript / Babel, as shown in the docs. Otherwise a field initializer counts as an assignment made in the constructor, so the code calling the constructor should be an action as well, when "strict" setting is used.

…

On Sat, 31 Jul 2021, 10:01 Egor Gorbachev, ***@***.***> wrote: @solugebefola <https://github.com/solugebefola> Did you manage to reproduce the issue in codesandbox? — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#3044 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAN4NBHTLFI5RZ47VVUAQJDT2OUXNANCNFSM5BE4GZEA> .