如何原子更新 mobx observables？

Question

我有一个商店

myStore

，它有一个

main

方法，该方法调用在mobx中设置观察值的多个方法。我的问题是我想在设置所有可观察值后重新渲染我的反应组件。

我可以创建 main 方法吗

@action

，即使它实际上并没有直接修改任何可观察量？这种情况的标准做法是什么？

class myStore {
    @observable var1;
    @observable var2;

    @action method1(val) {
        this.var1 = val;
    }

    @action mathod2(val) {
        this.var2 = val;
    }

    main() {
        this.method1("some random value 1"); // Mobx may re-render the react component just after this line
        this.method2("some random value 2");
        // I want to re-render the component here(at the end of method)
    }
}
      

Answer 1

通过在 main 方法上使用 @action，您可以确保即使该方法本身不直接修改任何可观察量，MobX 也会将整个过程视为单个原子操作以实现反应性目的。这意味着组件只会在所有可观察的更改完成后才会重新渲染。

import { observable, action } from 'mobx';

class myStore {
    @observable var1;
    @observable var2;

    @action method1(val) {
        this.var1 = val;
    }

    @action method2(val) {
        this.var2 = val;
    }

    @action main() {
        this.method1("some random value 1");
        this.method2("some random value 2");
        // No direct observables are modified here, but using @action will ensure reactivity
    }
}