Keeps views automatically in sync with state. Please, prefer https://github.com/mobxjs/mobx/discussions for coding questions
Ah found my own answer in the docs ā you have to tell TS about the private field:
By default TypeScript will not allow you to annotate private fields. This can be overcome by explicitly passing the relevant private fields as generic argument, like this: makeObservable<MyStore, "myPrivateField" | "myPrivateField2">(this, { myPrivateField: observable, myPrivateField2: observable })
@stephy I just ran into a similar problem last night... makeAutoObservable
seemed to be missing a class method and not turning it into an action.
One possible gotcha from the docs (this wasn't my case though):
However, makeAutoObservable cannot be used on classes that have super or are subclassed.
Out of curiosity, which syntax are you using to declare your function method? My problem action was using a binding syntax:myFunc = () => {}
In my case, I switched back to decorators and makeObservable(this)
, and it's working fine.
One note: I think you can add overrides to makeAutoObservable, so you can probably just put your setSessionStarted: action
into the second argument of makeAutoObservable
instead of using both makeAutoObservable
and makeObservable
(I don't know if using both is "bad")
Ah found my own answer in the docs ā you have to tell TS about the private field:
By default TypeScript will not allow you to annotate private fields. This can be overcome by explicitly passing the relevant private fields as generic argument, like this: makeObservable<MyStore, "myPrivateField" | "myPrivateField2">(this, { myPrivateField: observable, myPrivateField2: observable })
I just randomly ran across your post this morning and it helped me fix a bug. Thanks!
[mobx.trace] 'OpportunitySavingService@432.isQueueEmpty' is invalidated due to a change in: 'OpportunitySavingService@432._isQueueEmpty'
@observable private
is working in my code. What gives?
Incidentally, I'm changing this to:
@observable readonly isQueueEmpty: boolean = true;
@observable readonly saving: boolean = false;
And then using the Writeable template to internally modify these fields, like (this as Writeable<SavingService>).saving = true
type Writable<T> = {
-readonly [K in keyof T]: T[K];
};
localStorage
everytime the data changes. The autorun
function is not really running automatically when I do something to the array of models
in my case for example:constructor(rootStore: RootStore) {
makeObservable(this, {
makes: observable,
models: observable,
addMake: action,
editMake: action,
removeAllModelsOfMake: action,
removeMake: action,
addModel: action,
editModel: action,
removeModel: action,
});
this.rootStore = rootStore;
autorun(() => {
console.log('Models store changed', this.models);
});
}
autorun
. What am I doing wrong?
autorun
works on an example where data is either some kind of an object (i.e. User
with different fields) or it's undefined
, I guess then it sees a difference between undefined
and a User
type object.
models
object, which I'm guessing does not actually change when you make changes to your data. That is, even if you change properties of models
, the models
object itself is the same object, equal to itself, and will not trigger a rerun of that function.
model.price
deepObserve
from the mobx-utils
package, but you could certainly use autorun too
autorun(() => saveMyStuff(JSON.stringify(this.models));
// note that this observes every property all the way down the tree of models
// since JSON.stringify will deeply loop through every property