Обновление MobX и hashmap не запускает автозапуск

Question

Я пытаюсь обновить хэш-карту _users класса Test, и происходят две "странные" вещи (я новичок в MobX):

1. MobX, даже если включен строгий режим, позволяет мне обновлять _users, даже если он является наблюдаемым и addUser() не является @action
2. Автозапуск выполняется только один раз, хотя я ожидаю, что он будет запущен три раза

Если я поставлю this._users = {} внутри addUser() все работает как положено: MobX говорит мне, что addUser определен как действие, и автозапуск запускается несколько раз. Но это было только для тестирования, мне не нужно каждый раз сбрасывать hashmap

Как мне обновить _users, чтобы позволить MobX вызывать события?

Код следует

import { useStrict, configure, autorun } from 'mobx';
import { observable, action, computed } from 'mobx';


configure({ enforceActions: true });


class Test {
    @observable _users = {};
    userCount = 0;

    addUser() {
        this._users[this.userCount++] = 0;
    }

}

var t = new Test();

autorun(function test () {
    console.log("users: ", t._users);
});

t.addUser();
t.addUser();
t.addUser();

console.log("users: ", (Object.keys(t._users)).length); // print users: 3

Answer 1

Чтобы автозапуск работал (и наблюдатели в целом), вам необходимо получить доступ к свойству наблюдаемого объекта. Только это чтение (разыменование) скажет mobx, что наблюдать. Вы не делаете этого в своей функции автозапуска, поэтому у автозапуска нет шансов получить, когда он должен снова запустить автозапуск.

Так что в вашем случае вы должны прочитать хотя бы одну опору наблюдаемого объекта. Поэтому я бы порекомендовал сделать следующее:

import { useStrict, configure, autorun } from 'mobx';
import { observable, action, computed } from 'mobx';


configure({ enforceActions: true });


class Test {
    @observable _userStore = { users: {} };
    userCount = 0;

    addUser() {
        this._userStore.users[this.userCount++] = 0;
    }

}

var t = new Test();

autorun(function test () {
    console.log("users: ", t._userStore.users); // Here we are reading a prop of userStore
});

t.addUser();
t.addUser();
t.addUser();

console.log("users: ", (Object.keys(t._userStore.users)).length); // print users: 3

Рекомендации:

• https://mobx.js.org/best/react.html