Search code examples
javascriptasynchronousstoremobx

MobX async reaction


Hi I'm using MobX in a store and I need to have an async reaction when a computed value has changed:

class Store {
    @observable user;
    @observable something;

    @computed get firstParam () {
         return this.user && this.user.params[0];
    }

    async loadSomething () {
        reaction(
                () => this.firstParam,
                async (param) => {
                    const { data: something } = await axios.get(`url/${param}`);

                    runInAction('update state after fetching something', () => {
                        this.something = something;
                    });
                }
            );
     }

}

I was wondering what would be the difference here with using when instead of reaction apart from the running condition ?

when(
    () => !!this.firstParam,
    async () => {
         // fetch using this.firstParam
    }
)

Solution

  • Note that when executes it's effect only once and then stops. So in your case the data would only be fetched once.