в компоненте не отображает актуальный стейт стора (Mobx) при двойной деструктуризации

Question

Есть стор mobx, представленный в виде класса, у него есть метод запроса данных через REST API

На UI - нажатие на кнопку вызывает данный метод и устанавливает флаг загрузки (loadingTestRun) на true, при завершении выполнения запроса снова false, при этом во время обработки запроса должен отображаться лоэдер.

Есть хук, возвращающий стор, хук работает по всему приложению и отрабатывает хорошо. Все компоненты, взаимодействующие со стором обёрнуты в useObserve, проблема обнаружена именно в компоненте с двойной деструктуризацией

Проблема в том, что, если обращаться к loadingTestRun через rulesStore.loadingTestRun, то всё отрабатывает хорошо

  const { rulesStore } = useStores()

Но если деструктурирую ещё, то в в компонете, где ожидается увидеть загрузку - loadingTestRun остаётся false, при выполнении запроса

 const { rulesStore : { loadingTestRun } } = useStores()

Пример RootStore

class RootStore implements IRootStore {
  rulesStore: RulesStore
  groupStore: GroupStore
  projectStore: ProjectStore
  intervalsStore: IntervalsStore
  eventsStore: EventsStore
  templateStore: TemplateStore

  //Сюда подключаем все новые store и передаем в них this
  constructor() {
    this.rulesStore = new RulesStore(this)
    this.groupStore = new GroupStore(this)
    this.projectStore = new ProjectStore(this)
    this.intervalsStore = new IntervalsStore(this)
    this.eventsStore = new EventsStore(this)
    this.templateStore = new TemplateStore(this)
  }
}

class RulesStore implements IRulesStore {
  ...
  loadingTestRun = false
}

Answer 1

На мой взгляд, всё сводится к

var state = {
    rulesStore: {
        loadingTestRun: false,
    },
};
function useStores() {
    return state;
}
function changeState() {
    state.rulesStore.loadingTestRun = true;
}

const { rulesStore } = useStores();
const { rulesStore : { loadingTestRun } } = useStores();
changeState(); 
console.log(rulesStore.loadingTestRun, loadingTestRun);

Ни mobx, ни реализация стора тут ни при чём. Стэйт меняется асинхронно и это происходит позже, чем присваивание.

БЛОГ НА HUSL

в компоненте не отображает актуальный стейт стора (Mobx) при двойной деструктуризации

Ответы (1 шт):