CODEWITHSUNDEEP
javascriptasynchronousstoremobx
Komo
Komo

Reputation: 2138

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
    }
)

Upvotes: 5

Views: 6727

Answers (2)

mweststrate
mweststrate

Reputation: 4978

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

Upvotes: 7

Sagi Medina
Sagi Medina

Reputation: 915

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

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

This will track just this.firstParam and when that return a new data it will call 

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

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

Now, If you go with when I believe it would end up doing the same, Taken from mobx docs:

You can use observable data structures as a promise... After completing the asynchronous action, just update your data

So i see no reason why not to use when in your case.

Upvotes: 4

Related Questions