How does @action actually work?

[thphuccoder]

I have used MobX for years. Today I read the document again, the action session: https://mobx.netlify.app/api/action

I think I am confused about how the action works to "batch" observables.

Changes to the observables are only notified at the end of the action

In my stores, I often change the observables, each time the observables are changed/mutated, the UI gets notified immediately.
Here is an example:

...
@observable
bool loading = false;

@action 
Future<void> fetchData() {
   loading = true;

  // Call API to fetch data
  try {
      await repository.fetchData();
  } catch(e) {
      print(e);
  } finally {
     loading = false; 
  }
}
...

On the UI, I can see the update when loading = true and then (after some seconds for fetching data) UI is updated one more time when loading = false.
This means there is no batch like described in the document. Can anyone clarify this?

Thanks!

[lamnhan066]

@thphuc You can take a look at my PR #841, it also has some related information about this issue. It's completely an issue that needs to be fixed.

[amondnet]

@thphuc

I have used MobX for years. Today I read the document again, the action session: https://mobx.netlify.app/api/action

I think I am confused about how the action works to "batch" observables.

Changes to the observables are only notified at the end of the action
I think the documentation is misleading.

According to the docs, that behavior is intended.

mobxjs/mobx#3144
mobxjs/mobx#3144 (comment)

There is nothing like async transaction. Create a local temporal object/variable that is modified by the individual async tasks and write the result to actual observables at the end of async flow.

In essence, asynchronous processes don't need any special treatment in MobX, as all reactions will update automatically regardless of the moment in time they are caused. And since observable objects are mutable, it is generally safe to keep references to them for the duration of an action. However, every step (tick) that updates observables in an asynchronous process should be marked as action.

https://mobx.js.org/actions.html#asynchronous-actions

https://github.com/mobxjs/mobx-utils/tree/5.6.2#actionasync

#842