Passing data between stores

[m41w4r3exe]

I have a noob question to ask about passing data between stores, which I didn't understand how it works.

authStore accesses data from userStore and commonStore and it just basically imports them from their singleton export. however all these stores are also imported to index.js and passed to provider of mobx in order to inject and use them in react components. What I don't get here is that these should be different instances of userStore and commonStore, shouldn't they? Because they are imported twice to different js files.

I'm trying to do the same pattern in my very basic app where I need to pass data between stores, but it just doesn't work out. when I change a data in a store which I access from within a React component, it doesn't affect the same store which is imported to another store to pass its data, because they are different instances of the store classes.

I hope I made my confusion clear here, and I really would appreciate some help to understand some fundamentals here, and the point I'm missing.

Thanks a lot!

[lukelindsey]

You'll see here that it's exporting an instance of the user store, so anywhere you import it, you'll be getting the same instance.

[jsardev]

@lukelindsey It's exporting a NEW instance every time.

@hplusb I too don't understand how can this even work. Did you found any informations about this topic?

[lukelindsey]

@sarneeh that's a misinterpretation of that syntax. It's default export is a single new instance of the store. Every time you import that default export, you'll get the same instance. Try it out with a simple example and you'll see that's true.

[jsardev]

@lukelindsey No, it's not. The reason it works like you describe it is that the module gets cached and the cached value is the same instance all the time. This can be misused very easily without the proper knowledge.

Of course, it works in most cases, but IMHO it's not a good way to handle dependencies. And there are some meaningful reasons behind it.