Using react mobx actions from another stores inside components and other stores

[Gabotron-ES]

in my react native app I want to use mobx for state management, my store is divided in multiple stores/files and since I want to be able to call a store actions from another stores I'm implementing a GlobalStore where I instantiate the other stores.

I want to be able to do something like this from my components

import { PostStore }  from '../stores/PostStore.js'
import { UserStore }  from '../stores/UserStore.js'
import { VenueStore }  from '../stores/VenueStore.js'


class GlobalStore
{
    
    postStore = new PostStore(this);
    userStore = new UserStore(this);
    venueStore = new VenueStore(this);

}

export default new GlobalStore;

This makes it so that using react-native Context-Provider API I can call every store action in ALL my compoennts using globalStore as a link:

In any component I can do:

globalStore.postStore.listPosts()

However I'm still not sure how I can access other store actions from within OTHER STORES.

What if inside postStore I want to use spinnerStore (to show axios calls pending, error or success status):

@action.bound getPosts = flow(function * (payload) 
    {
        this.spinnerStore.setData({status: 1});
        try 
        {
            this.spinnerStore.setData({status: 2, response: response});
            let response = yield axios.get('/api/posts', { params: payload })
            return response;
        } 
        catch (error) {
            console.error(error);
            this.spinnerStore.setData({ status: 3, errors: error });
            throw error;
        }
    })

Here spinnerStore would be undefined...

[ilovedesert001]

A simple store pattern , you can access any property from anywhere

https://codesandbox.io/s/wispy-monad-c6m0y?file=/src/index.ts