MobX async reactions causing Promise warning

Question

Simplified version of my store...

export class DataStore {
    api;

    @observable prop1;
    @observable prop2;

    @observable data1;
    @observable data2;

    constructor(api) {
        this.api = api

        reaction(
            () => this.prop1,
            (id, reaction) => {
                this.loadData1();
            }
        );

        reaction(
            () => this.prop2,
            (id, reaction) => {
                this.loadData2();
            }
        );
    }

    @action
    async loadData1() {
        let results = await this.api.getData1(
            this.prop1
        );
        runInAction(() => { 
            this.data1 = results.data;
        });
    }

    async loadData2() {
        let results = await this.api.getData2(
            this.prop2
        );
        runInAction(() => { 
            this.data2 = results.data;
        });
    }
}

the prop1 reaction triggers first without issue. Once the prop2 reaction triggers I get the following message in the console.

Warning: a promise was created in a handler but was not returned from it

I've debugged myself in circles and can't seem to track down the cause of the warning. Any help would be greatly appreciated!

[A bit of searching, and it appears to be a bluebird promise warning](http://bluebirdjs.com/docs/warning-explanations.html#warning-a-promise-was-created-in-a-handler-but-was-not-returned-from-it), though it's hard to tell how that relates to your specific issue here :/ — kingdaro, Mar 05 '18 at 00:39

FisNaN · Answer 1 · 2018-03-05T20:54:30.020

0

The callback function in reaction also can be async. I suggest to validate prop before calling loadData function.

export class DataStore {
    @observable prop1;
    @observable prop2;

    @observable data1;
    @observable data2;

    constructor(api) {
        this.api = api;

        reaction(() => this.prop1,
            async (prop1) => { prop1 && (await this.loadData1()); }
        );

        reaction(() => this.prop1,
            async (prop2) => { prop2 && (await this.loadData2()); }
        );
    }

    @action
    asnyc loadData1() {
        const results = await this.api.getData1(this.prop1);
        this.data1 = results.data;
    }

    @action
    asnyc loadData2() {
        const results = await this.api.getData2(this.prop2);
        this.data2 = results.data;
    }
}

edited Mar 05 '18 at 20:54

answered Mar 05 '18 at 03:16

FisNaN

1,941
2
17
31

Added async to the callback but I'm still getting the warning. – mbugbee Mar 05 '18 at 16:43
Are you sure `this.api.getData1` and `this.api.getData2` handle `Promise` correctly? – FisNaN Mar 05 '18 at 19:53
the api calls are simply `return axios.get('/path/to/endpoint');` – mbugbee Mar 05 '18 at 19:59
Made a mistake, should `await` loadDate in the `async` reaction. Another possible problem could be the global axios interceptors. Have you eject it correctly? – FisNaN Mar 05 '18 at 20:56
Still no love. The calls work fine if I trigger them other ways... (componentDidMount). Once I have a reaction trigger the calls, the warning pops up. – mbugbee Mar 05 '18 at 21:13
If you create a codesandbox, I might be able to have a look. https://codesandbox.io/s/m516xzyk9x Can't see any problem with the code snippet I got here – FisNaN Mar 05 '18 at 21:29
Looks like it ended up being a faulty Promise polyfill we were using in other parts of the app. Appreciate the help! – mbugbee Mar 05 '18 at 23:36

MobX async reactions causing Promise warning

1 Answers1