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")
https://mobx.js.org/observable-state.html#makeautoobservable
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