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, Action
s 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 action
s directly “touch” and manipulate the ui
s?
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.