How can I access mobx store in another mobx store?

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.

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

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>

Method 2

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.


All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes
Article Rating
Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x