Mobx: reaction for observing object doesn't work - mobx

Question

Here is my store:
import { observable, action, flow, reaction } from "mobx";
export default class Demo {
#observable obj = {
flag: false,
name: "",
age: 20
};
#action
turnFlag = () => {
this.obj.flag = true;
};
constructor() {
reaction(
() => this.obj,
obj => {
console.log(obj.flag);
}
);
}
}
What I want do is, if any property in obj changed, the reaction callback will be invoked.
But when the action turnFlag executed, nothing happened.
So what's wrong with my code? If I want supervisor any change in obj, what should I do?

Answer 1

To make the reaction work you need to have it watch a property on the observable, rather than the root obj.
reaction(
() => this.obj.flag,
flag => { console.log(`FOO: ${flag}`); }
);
There's a working example of that here: https://codesandbox.io/s/km3n38yrj7
(Open your browser console to see the output.)
The documentation covers this here:
It is important to notice that the side effect will only react to data that was accessed in the data expression, which might be less then the data that is actually used in the effect.
In your original code you weren't accessing anything on 'obj'.
Since you want to do something when anything on 'obj' is changed:
What I want do is, if any property in obj changed, the reaction callback will be invoked.
It sounds like you instead want 'observe'.
observe(this.obj, change => {
console.log(
`${change.type} ${change.name} from ${change.oldValue}` +
` to ${change.object[change.name]}`
);
});
I've updated the codesandbox link to show that.

Answer 2

let's try so as
`import { observable, action, flow, reaction } from "mobx";
class Demo {
#observable obj = {
flag: false,
name: "",
age: 20
};
#action
turnFlag = () => {
this.obj.flag = true;
};
constructor() {
reaction(
() => this.obj,
obj => {
console.log(obj.flag);
}
);
}
}
export default Demo;
`