Flutter + MobX + Async Actions

Let’s see how we can use the MobX for implementing Async actions

In this article we are going to see how we can perform the Async tasks using the Mobx Actions.

So lets start without wasting more time.

1. Add dependencies

• dio: for making api calls
• pretty_dio_logger: for logging network requests with metadata
• provider: for dependancy injection of the MobX stores
• mobx & flutter_mobx: for creating MobX stores
• debounce_throttle: for throttlin calls to the api

Apart from these, we also need following deve_dependencies,

• build_runner: for code gen
• json_serializable: for supporting code gen for model parsing to and from Json
• mobx_codegen: generating the boilerplate code required for the mobx stores

I have used the latest version at the time of writing this code. Make sure to use the latest versions, to keep your code up to date, if anything prevails.

Before you begin and after you are done with `pub get`, make sure you are aware with the following command.

flutter packages pub run build_runner watch

This will keep an eye on the code changes as you progres, and generate the code for json_serializable and mobx

You can also make it run for only once, as following, by changing the last param from watch to build.

flutter packages pub run build_runner build

2. Create FutureStore

Whole purpose of FutureStore is to maintain the state of the async requests. We store various aspects of the async actions, as following,

• future - ObservableFuture of the async task.
• futureState - Computed based on the current state of the future
• data - Observable that holds the actual result of the future
• errorMessage - Observable that holds the errors from the future, if any.

I prefer keeping the data as generic, so that we can reuse the same FutureStore, irrespective of the type of data we are expecting it to hold. One thing to add here, its not mandatory that we have to hold the data in this store, as sometimes we won’t be expecting any result from the future.

At the last line you can also see the enum called FutureState. It can be debatable, that can be directly use the ObserbvableFuture’s FutureStatus or not. But I personally prefer this approach, as in the future if we need to customized/add anything, we can do that.

3. Implement Repo & Api Client

We are using the dio for making the api calls here. So we are going to break handling of api calls in 2 separate files, following, client + repo approach.

3a. Create DioHelper

I used the https://www.mockapi.io/ for creating fake api, for the purpose of article. It is intriguingly, pretty straight forward as well as powerful.

3b. Create UserApiClient

Api client will only hold the part where we prepare the data for api calls, and returning back the data as received from the api. It does not perform any manipulations or parsing operations on the data received.

3c. Create User Model

We have the json_serializable to ease out the task of handling the parsing & converting the object to and from json.

3d. Create UserRepo

Here we manipulate data received from the api to transform as our needs.

Now that we have all set to make the api call, we can go ahead with call it from the MobX Store.

4. Use FutureStore in other UsersStore

This is the main store, which we will be integrating with the UI. For the sake of simplicity & focus, I have not included actual implementation of network requests, in this article.

In the users_store.dart, we initialized the FutureStore as an Observable. We also add an Action. As you have observed, I kept the name of Action and Observable Future State in sync.

So in this approach, for each async task, we will create one Future Store as well as one corresponding Action.

users_store.dart

5. Integrate with the UI

We have made the initial call to the store action to load users in the didChangeDependencies.

Also we are calling it again on the search TextField’s change event.

home_screen.dart

Main part to is the Observer widget in the UI hierarchy. You have easily understood, how we are using the FutureStore to control the various states of the UI.

6. Done

final result

So you are all set to use MobX for smooth Async Actions, with more controlled manner. I have been following this approach in my many of the apps which are already in production.

You can checkout the full code at https://github.com/pavanjaju/flutter-mobx-async