Different mobx store instances in react-native app

[Gabotron-ES]

in my react-native I use mobx for state management single source of truth, app is made of multiple mobx stores, I want to set it so that stores can communicate between them using custom hook useStore.

My question is if I will be keeping the same instance of the stores, afaik if I have multiple instances of mobx stores I'll have problem debugging state...

Inside a store I can call another store (spinnerStore from postStore for example):

export class PostStore
{
    
    globalStore;
    @observable posts = [];

    
    constructor(globalStore)
    {
        this.globalStore = globalStore;
    }

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

In my components (via useStore() hook

import { useStore } from '@hooks/use-store';

function App()
{
    
    const globalStore = useStore();

    return (
    <SafeAreaView style={[ globalStyles.androidSafeArea ]}>
        <NavigationContainer>
            <Text style={{ color:'red', fontSize:20 }}>{ globalStore.venueStore.badgeCount }</Text>
        </NavigationContainer>
    </SafeAreaView>
    );
}


export default App;

index.js

import React from 'react'
import { configure } from 'mobx';
import globalStore  from '../stores/GlobalStore.js'


export const storesContext = React.createContext(globalStore);


configure({ enforceActions: "observed" });

GlobalStore.js

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


class GlobalStore
{
    
    postStore;
    venueStore;


    constructor()
    {
        this.postStore = new PostStore(this);
        this.venueStore = new VenueStore(this);
    }


}

export default new GlobalStore;

and last piece, useStore hook

import React from 'react'
import { storesContext } from '../contexts/index.js'

export const useStore = () => React.useContext(storesContext);

[danielkcz]

I don't understand your question. You have a singleton instance of GlobalStore and that means only one instance of everything will exist.