async/await and runInAction

[MariiaIasakova]

Like documentation said, I need to wrap all state changes in runInAction after await. Is the next code right?

       try {
            const result = await api.asyncMethod();
            runInAction(() => {
                 this.state = result;
            });
            const newResult = await someAsyncMethod();
            runInAction(() => {
                 this.anotherState = newResult;
            });
        }
        catch (e) {
            someCatchMethod(e);
        }
       finally {
            runInAction(() => {
                  this.state= "end";
            });
        }

[danielkcz]

Can you ask some concrete questions? Does the code work for you?

[MariiaIasakova]

code works for me
also it works in this

try {
            const result = await api.asyncMethod();
            this.state = result;
            const newResult = await someAsyncMethod();
            this.anotherState = newResult;
        }
        catch (e) {
            someCatchMethod(e);
        }
       finally {
            runInAction(() => {
                  this.state= "end";
            });
        }

in some cases like this

try {
            const result = await api.asyncMethod();
            this.state = result;
            const newResult = await someAsyncMethod();
        }
        catch (e) {
            someCatchMethod(e);
        }
       finally {
            this.state= "end";
       }

I want to know your recommendation how to structure it right

[mweststrate]

Hi @MariiaIasakova, if it works, and you get no warnings (that is, all updates to observables are from an action), any of the means as we documented is fine :) We're here to keep this lib up and running, but we try to be unopinionated as much as possible beyond that. Which is why you find 4 different ways to achieve async code, which are all fine: https://mobx.js.org/actions.html#asynchronous-actions. Beyond that, I'd just try to mix the approaches and see which I find most satisfying after a while

[MariiaIasakova]

ok, thanks for reply

[da1z]

@mweststrate hi. can observable be updated straight from await or it has to be wrapped into runInAction? something like this:

@action
foo = async () => {
      myObservable = await fetchData();
}

[jheeffer]

@da1z you can only set properties on observable objects by assigning (obj.prop = await ...), or set a boxed observable using obs.set(await ...). obs = await ... is not possible.

By default, no, you can't assign straight from await, you need an action/runInAction for every "step" in an async process. Await creates such a step. Though you can configure mobx to allow state modification without actions, this is not recommended.

[mweststrate]

Please check the docs on actions > async actions.

…

On Thu, 8 Apr 2021, 23:56 Kiryl Chetyrbak, ***@***.***> wrote: @mweststrate <https://github.com/mweststrate> hi. can observable be updated straight from await or it has to be wrapped into runInAction? something like this: @action foo = async () => { myObservable = await fetchData(); } — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#2645 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAN4NBGMV74MEZED5EK6K4DTHYYC3ANCNFSM4UCNQIYQ> .