What's the best way to declare global actions in Mobx-State-Tree?

Question

Assume I have set of actions in different parts of the state tree that apart from their logic should modify certain property on the root node, for instance, toggle loading prop to indicate that UI should globally change progress indicator visibility.

const Contacts = types.model( 'Contacts', {
    items: types.array(types.string)
}).actions(self=>({
    show: flow(function* fetchData(){
        // somehow indicate start of the loading process
        self.items = yield fetch();
        // somehow indicate end of the loading process
    }) 
}));

const Store = types.model('AppStore', {
    loading: types.optional(types.boolean, false),
    contacts: Contacts
}).actions(self => ({
    toggle() {
        self.loading = !self.loading;
    }
}));

While I certainly can use getRoot this will bring certain inconvenience to testing flow and downgrades overall design transparency.

Probably use of lazy composition and exporting instances along with model declarations from module can do, but this looks even weirder for me.

What is the suggested way to deal with this kind of issues in Mobx-State-Tree?

Answer 1

I think you can use types.reference and types.late in your models which down the tree for access to the root actions.