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.

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.

• javascript
• reactjs
• mobx
• mobx-react

3 Answers 3

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.

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>

Look my solution with RootStore: here