Mobx: вызов метода класса при изменении отслеживаемого объекта

Question

Подскажите, можно ли и если можно, то как реализовать следующее:

С помощью MobX вызывать метод класса при изменении отслеживаемого объекта (например, члена класса), т.е. чтобы когда изменялась какая-то переменная дергался метод:

class MyElement extends Component<any> {

    data: any = 10;

    // метод, вызываемый при изменении значения this.data
    myaction() {
//        console.log(this.data);
    }

    render() {
        ...
    }
}

decorate(MyElement, {
    data: observable
} as any)

Answer 1

Чтобы выполнить код, когда изменится состояние observable или computed поля, можно использовать реакции.

К примеру,

import { makeAutoObservable, autorun } from "mobx"

class Animal {
    name!: string
    energyLevel!: number

    constructor(name) {
        this.name = name
        this.energyLevel = 100
        makeAutoObservable(this)
    }

    reduceEnergy() {
        this.energyLevel -= 10
    }

    get isHungry() {
        return this.energyLevel < 50
    }
}

const giraffe = new Animal("Gary")

autorun(() => {
    console.log("Energy level:", giraffe.energyLevel)
})

autorun(() => {
    if (giraffe.isHungry) {
        console.log("Now I'm hungry!")
    } else {
        console.log("I'm not hungry!")
    }
})

console.log("Now let's change state!")
for (let i = 0; i < 10; i++) {
    giraffe.reduceEnergy()
}

Результат выполнения будет такой:

Energy level: 100
I'm not hungry!
Now let's change state!
Energy level: 90
Energy level: 80
Energy level: 70
Energy level: 60
Energy level: 50
Energy level: 40
Now I'm hungry!
Energy level: 30
Energy level: 20
Energy level: 10
Energy level: 0

БЛОГ НА HUSL

Mobx: вызов метода класса при изменении отслеживаемого объекта

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