Assume following structure
stores/
RouterStore.js
UserStore.js
index.js
each of ...Store.js
files is a mobx store class containing @observable
and @action
. index.js
just exports all stores, so
import router from "./RouterStore";
import user from "./UserStore";
export default {
user,
router
};
What is correct way to access one store inside another? i.e. inside my UserStore, I need to dispatch action from RouterStore when users authentication changes.
I tired import store from "./index"
inside UserStore
and then using store.router.transitionTo("/dashboard")
(transitionTo
) is an action within RouterStore class.
But this doesn't seem to work correctly.
Stores can be found in any Flux architecture and can be compared a bit with controllers in the MVC pattern. The main responsibility of stores is to move logic and state out of your components into a standalone testable unit that can be used in both frontend and backend JavaScript.
To simply persist your MobX store use makePersistable . Pass a reference of the store ( this ) as the first argument. The second argument is the StorageOptions for persisting the store data.
MobX is a simple, scalable, boilerplate-free state management solution. It allows you to manage application state outside of any UI framework, making the code decoupled, portable and, above all, easy to test. It implements observable values, which are essentially using the publish/subscribe pattern.
In app, create a folder called mobx. In mobx, create a file called listStore. js: Import observable from mobx — observable adds observable capabilities to existing data structures like objects, arrays and class instances.
In this case you just need to pass only one link
Just create global store and pass link of the GlobalStore to every children stores where you need to get access:
// global parent store
class GlobalStore {
constructor() {
this.routerStore = new RouterStore(this);
this.userStore = new UserStore(this);
// ... another stores
}
}
// access in child
class UserStore {
constructor(rootStore) {
this.routerStore = rootStore.routerStore;
}
// ...
}
// In root component:
<MobxProvider {...new GlobalStore()}>
<App />
</MobxProvider>
Your propose solution doesn't work because you are interested in the instance of the store which contains the observed values instead of the Store class which has no state.
Given that you don't have any loop between store dependencies, you could pass one store as a constructor argument to another store.
Something like:
routerStore = new RouterStore();
userStore = new UserStore(routerStore);
stores = {user: userStore, router: routerStore};
Here you pass the routerStore instance to the userStore, which means that it'll be available. For example:
class UserStore {
routerStore;
constructor(router) {
this.routerStore = router
};
handleLoggedIn = () => {
this.routerStore.transitionTo("/dashboard")
// Here the router has an observable/actions/... set up when it's initialized. So we just call the action and it all works.
}
}
Another way could be to pass the other store (say routerStore) as an argument when calling a function that is in userStore.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With