Автозапуск Mobx на основе истинности вычисленного значения

Я все еще довольно новичок в MobX, я понимаю концепции вычисляемых, автоматических, наблюдаемых. Но я борюсь с определенным сценарием. У меня в магазине есть следующий код (я использую mobx-state-tree):

export const store = types
    .model({
        renderingState: types.optional(types.string, 'stage1'),
        containerMounted: types.optional(types.boolean, false),
    })
    .views(self => ({
        //computed value
        isReady() {
            if (self.renderingState === 'stage3' && self.containerMounted) {
                return true;
            }
        }
    }))

По сути, я хочу запустить функцию loadConfigurations, когда вычисленное значение истинно. В этом сценарии я хочу запустить свою функцию, когда renderingState имеет значение stage3, а containerMounted — true. Насколько я понимаю автозапуск, он сработает, как только вычисленное значение изменится. Но я хотел бы, чтобы моя функция срабатывала, когда оператор if действителен.

Если у вас есть какое-то понимание или вы можете помочь прояснить любое неправильное представление, которое у меня есть, это было бы здорово.


javascript mobx mobx-state-tree autorun
person Abdullah Monoar    schedule 08.09.2019    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Первая проблема заключается в том, что ваше свойство isReady не вычисляется. Чтобы сделать его вычисляемым, он должен быть таким

    .views(self => ({
        //computed value
        get isReady(): boolean {
            if (self.renderingState === 'stage3' && self.containerMounted) {
                return true;
            }

            // add the default value
            return false;
        }
    }))

Теперь, когда isReady является вычисляемым свойством, вы можете просто использовать его внутри автозапуска.

autorun(() => {
    if (myStore.isReady) {
        // your logic goes inside the if
        console.log("My store is ready")
    }
})

OR

autorun(() => {
    if (!myStore.isReady) {
        return false
    }

    // your logic goes here
})

Функция внутри autorun будет запускаться каждый раз, когда isReady меняет свое значение, true/false. Когда она переходит от false к true, логика будет выполняться.

TBH Я действительно не использую autorun, мне нравится использовать reaction внутри метода afterCreate, как это

export const store = types
    .model({
        renderingState: types.optional(types.string, 'stage1'),
        containerMounted: types.optional(types.boolean, false),
    })
    .actions(self => ({
      afterCreate() {
        addDisposer(self, reaction(
          () => {
            return self.isReady
          },
          () => {
            if (self.isReady) {
              // your logic should go here
            }
          }
        ))  
      }
    }))
    .views(self => ({
        //computed value
        get isReady() {
            if (self.renderingState === 'stage3' && self.containerMounted) {
                return true;
            }

            return false;
        }
    }))
person etudor    schedule 11.09.2019
comment
встроена ли функция addDisposer в mobx? - person Pavan; 18.05.2020
comment
@Pavan addDisposer — это встроенная функция дерева состояний mobx дерева состояний mobx. .js.org/API/#adddisposer - person etudor; 22.05.2020