Вопрос:
Предположим следующую структуру
stores/ RouterStore.js UserStore.js index.js
каждый из …Store.js файлов – это класс хранения @observable содержащий @observable и @action. index.js просто экспортирует все магазины, поэтому
import router from «./RouterStore»; import user from «./UserStore»; export default { user, router };
Каков правильный способ доступа к одному магазину внутри другого? т.е. внутри моего UserStore, мне нужно отправить действие из RouterStore, когда изменяется аутентификация пользователей.
Я устал import store from «./index» внутри UserStore а затем с помощью store.router.transitionTo(«/dashboard») (transitionTo) – это действие в классе RouterStore.
Но это работает неправильно.
Лучший ответ:
Решение вашего предложения не работает, потому что вас интересует экземпляр магазина, который содержит наблюдаемые значения, а не класс Store, который не имеет состояния.
Учитывая, что у вас нет циклы между зависимостями хранилища, вы можете передать один магазин в качестве аргумента конструктора другому магазину.
Что-то вроде:
routerStore = new RouterStore(); userStore = new UserStore(routerStore); stores = {user: userStore, router: routerStore};
Здесь вы передаете экземпляр routerStore в userStore, что означает, что он будет доступен. Например:
class UserStore { routerStore; constructor(router) { this.routerStore = router }; handleLoggedIn = () => { this.routerStore.transitionTo(«/dashboard») // Here the router has an observable/actions/… set up when it initialized. So we just call the action and it all works. } }
Другой способ – передать другой магазин (например, routerStore) в качестве аргумента при вызове функции, которая находится в userStore.
Ответ №1
В этом случае вам просто нужно пройти только одну ссылку
Просто создайте глобальный магазин и передайте ссылку на GlobalStore во все детские магазины, где вам необходимо получить доступ:
// 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>
