Comment accéder au magasin mobx dans un autre magasin mobx?

Question

On suppose la structure suivante

stores/ 
    RouterStore.js 
    UserStore.js 
    index.js 

chacun des fichiers ...Store.js est une classe de magasin MOBX contenant @observable et @action. index.js exporte seulement tous les magasins, donc

import router from "./RouterStore"; 
import user from "./UserStore"; 

export default { 
    user, 
    router 
}; 

Quelle est bonne façon d'accéder à un magasin dans un autre? c'est-à-dire à l'intérieur de mon UserStore, j'ai besoin d'envoyer une action à partir de RouterStore lorsque l'authentification des utilisateurs change.

Je fatigué import store from "./index" l'intérieur UserStore puis en utilisant store.router.transitionTo("/dashboard") (transitionTo) est une action dans la classe RouterStore.

Mais cela ne semble pas fonctionner correctement.

Answer 1

Votre proposition de solution ne fonctionne pas car vous êtes intéressé par l'instance du magasin qui contient les valeurs observées au lieu de la classe Store qui n'a pas d'état. Étant donné que vous n'avez aucune boucle entre les dépendances de magasin, vous pouvez passer un magasin en tant qu'argument de constructeur à un autre magasin.

Quelque chose comme:

routerStore = new RouterStore(); 
userStore = new UserStore(routerStore); 

stores = {user: userStore, router: routerStore}; 

Ici vous passez l'instance routerStore au userStore, ce qui signifie qu'il sera disponible. Par exemple:

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. 
    } 
} 

---

Une autre façon pourrait être de passer l'autre magasin (disons routerStore) comme argument lors de l'appel d'une fonction qui est en userStore.