I have a small application project under ReactJs, and after studying the question, I decided to use a different store for each instance created.

In fact, this way I can instantiate multiple components on the same page as follows:

var instance1 = new MyApp(".class1");
var instance2 = new MyApp(".class2");

And the MyApp class looks like this:

class MyApp {

    constructor(myClass){
        this.myClass = myClass;
        this.context= createContext("myClass");
        this.init();
    }
    
    init(){
        render(
            <Provider  context={this.context} store={createStore(this.myClass)}>
                <App />
            </Provider>,
            document.querySelector(this.myClass)
        );
    }

    destroy(){
        render(null, document.querySelector(this.myClass));
    }

}

Everything works correctly! The only concern I encounter is how to proceed to retrieve the store of each instance from a class/function helper.

Let's say I create a Helper class like this:

class Helper {
    constructor(myClass){
        this.myClass = myClass;
    }

    getStore(){
        // I have a function that allows me to find the corresponding store using the class of the instance
        return retrieveStore(this.myClass);
    }
}
export default Helper;

And that I declare an attribute in the constructor of the MyApp class like this, having taken care to import it of course:

constructor(myClass){
this.myClass = myClass;
this.context = createContext("myClass");
this.helper = new Helper("myClass"); // <-- Here
this.init();

}

If I do this:

var instance = new MyApp(".class1");
instance.helper.getStore();

I get the store corresponding to the instance.

So my question is, how to get the helper class instance corresponding to the current MyApp instance inside a React component? Because I can't import the class, since I will only initialize a new class and I won't have the store corresponding to the current MyApp instance.