New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Way of Creating multiple stores with mobx and injecting it into to a Component ? Way of Communication between the stores? #1935
Comments
@Uneetpatel7 hi const rootStore = new RootStore()
<Provider
rootStore={rootStore}
bankAccountStore={rootStore.bankAccountStore}
authStore={rootStore.authStore}
>
<App />
</Provider> to make it more clearer what store the component dependent on. You can also pass more specific props to component by custom inject to make the component get better decoupling. (I like customizing inject so much) |
Thanks for the reply. I can think of two approaches here.
Approach 2:
Okay that is the injection part! Now I know a good design keeps stores independent and less coupled. But somehow consider a scenario where I want the variable in
Does approach 1 and approach 2 make any difference other than syntax difference ? Do these approaches works for the scalable web apps in long run? I would like to hear from you guys. Please @fi3ework @mweststrate @naivefun @urugator |
hi, const InjectUser = inject(stores => ({
userName: stores.userStore.userName,
token: stores.authStore.token,
})
)(User)
class User extends React.Component {
// this.props.userName here,
// this.props.token here
} So that |
@fi3ework What about the last aprroach governing the communication between the stores? Any comments |
I usually define an action and communicate via rootStore, like this: class AuthStore {
constructor(rootStore){
this.rootStore = rootStore;
}
@action
addInfo(){
this.rootStore.userStore.someObservableProp = `sth new`
}
} |
I want to listen to changes on observable variable of another store. I think you are tyring to change the observable variable of another store but that is not my question. |
You mean a property in store A that observes a property in store B? |
yeah exactly! |
I think |
as @fi3ework suggests export class AuthStore {
constructor(rootStore) {
this.rootStore = rootStore
}
@computed get dependentVariable() {
return this.rootStore.userStore.changeableUserVariable;
}
}
|
Thank you all for making the air clear. I hope this discussion may help to growing mobx community. |
@urugator good points, let me also add one drawback with storing rootStore in each store is that when you have to deal with Json.serializer, store serializing will fail with circular reference error. This is critical in SSR . |
This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs or questions. |
As suggested here in the Mobx documentation I have created multiple stores in the following manner:
And finally creating a root store in the following manner. As stated here I went on to construct an instance of "children" stores within "master" store constructor. Moreover, I found that sometimes my child store has to observe some data from parent store, so I pass
this
(of a parent) into child constructorsProviding to the App in following manner:
And injecting to the component in like this:
Is it the correct and efficient way to inject the root store every time to the component even if it needs a part of the root store? If not how to inject auth Store or only required number of stores to the user component? How to share data between stores which can change in future?
I am sorry to ask it here as I didn't get much response here on stack overflow. I would like to know better approach as it may have an opinionated answer
MOBX Version -
5.9.0
MOBX-REACT Version -
5.4.3
The text was updated successfully, but these errors were encountered: