Are MobX actions allowed to show a confirm dialog, or navigate to a new screen? More generally, can actions touch ui?

Question

I am refactoring MobX in large-scale applications. Since it is big, making the code clean is very important.

There is an action that does the following (simplified):

@action myAction() {
  var data = await api.getSomeDataFromServer();
  
  if (data.warnUser) {
    var userAgrees = await showConfirmDialog('Hey, are you really sure?'); // #1
    if (!userAgrees) return;
  }

  someOperations(data);

  Navigator.push('/another_page'); // #2
}

I am worried whether the #1 and #2 are OK or not. The reason is that, IMHO mobx has a UI - action - state triad (as is seen in the figure below by the mobx book). Thus, Actions should modify the State instead of the UI directly. But in #1, the Action directly shows a dialog - which is UI; in #2, the Action directly navigates to another page - which is also UI related.

In short, can MobX's actions directly "touch" and manipulate the uis?

I have made some searches about this and is quite confused now. Thanks for any suggestions!

Remark: I tag it as both Flutter and JavaScript, because indeed I am using Flutter but this question applies to the JS version of MobX as well.

Remark: Following is the diagram from the mobx book.

Answer 1

One of the main advantages of Mobx is making the state and UI completely decoupled. By decoupling the state from the UI, your tests will be far easier to write. The example you posted, would be very hard to test.

I had projects where I would write the complete application business logic without starting to work on the UI at all, then I would just hook the state and state-changing methods to the UI.

Also because Mobx works with flutter and Javascript by decoupling the UI from state management, you could port the complete business logic to Javascript and vice versa. So to conclude, your code works but it's not the Mobx way :)

For example, you could mobx reaction to react 😁 to state changes.

@action myAction() {
  // if myAction is a method on JS class
  this.data = await api.getSomeDataFromServer();
}

Then somewhere in you UI code

reaction(
    () => myClassInstance.data, // when data changes
    data => { //<- run this function
  
     if (data.warnUser) {
       var userAgrees = await showConfirmDialog(); // #1
       if (!userAgrees) return;
     }

    someOperations(data);

    Navigator.push('/another_page'); // #2
    }
)

Hope this helps