Autostart MobX

Question

I am learning MobX and am intrigued by the problem:

If I have this observable:

class ItemsStore {
    @observable items = [1,2,3];
}
const store = new ItemsStore;

and then change it like this:

setInterval(() => {
    store.items[0] = +new Date
}, 1000)

I noticed the following:

• autorun(() => console.log(store.items)); never works ...
• autorun(() => console.log(store.items[0])); triggered every 1 s and gives a new value
• autorun(() => console.log(store.items.length)); fired every 1 s, although the value does not change

What is the logic behind the API for this? I would expect that since it store.itemsnever works, these immutable properties would behave the same.

And how does MobX know what code is inside my callback? he parses my callback, am I going to autorun?

Answer 1

console.log (store.items)

, , , . store.items . store.items.slice() store.items.toJS(), .

console.log(store.items [0])

, , , .

console.log(store.items.length)

, MobX . length :

Object.defineProperty(ObservableArray.prototype, "length", {
    enumerable: false,
    configurable: true,
    get: function(): number {
        return this.$mobx.getArrayLength();
    },
    set: function(newLength: number) {
        this.$mobx.setArrayLength(newLength);
    }
});

getArrayLength , MobX :

getArrayLength(): number {
    this.atom.reportObserved();
    return this.values.length;
}