Returning promises from MobX actions

Question

Is it OK to return promises from the actions or is it against the store pattern?

Setting an observable property after every successful fetch operation to update to the UI seems a lot of unnecessary work.

So is this ok:

@action signup(username: string, password: string) {
    return new Promise(async (resolve, reject) => {
        if (success) {
            return resolve(username)
        }

        return reject('user_not_found')
    })
}

Answer 1

If your function has no impact on the state of the store, there is no need to make it an action. So you don't need to worry about returning a Promise.

From the documentation:

Any application has actions. Actions are anything that modify the state. With MobX you can make it explicit in your code where your actions live by marking them. Actions help you to structure your code better.

Here, your action doesn't modify the state. So you can just remove the @action decorator.

That being said; it's true that at the beginning it's rather easy to just update the UI and not maintain the result of async queries in the store. However in the long term you will find out that you want to manage a isLoading variable to show the user that something is being done in the background, then you'll want to show errors in a snackbar... and your simple fetch will have lots of impact of the UI. This is where using a mobx store will help you manage the state out of the component.

So, your action is probably indeed an action and you might just want to update your store's state from what it does instead of returning a promise that you'll have to deal with anyway.