如何在另一个mobx商店中访问mobx商店?

时间:2017-07-05 14:12:05

标签: javascript reactjs mobx mobx-react

假设以下结构

stores/
  RouterStore.js
  UserStore.js
  index.js

每个...Store.js文件都是包含@observable@action的mobx商店类。 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类中的一个操作。

但这似乎无法正常工作。

2 个答案:

答案 0 :(得分:2)

您建议的解决方案不起作用,因为您对包含观察值的商店实例感兴趣,而不是没有状态的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's initialized. So we just call the action and it all works. 
    }
} 

另一种方法是在调用userStore中的函数时将另一个商店(比如routerStore)作为参数传递。

答案 1 :(得分: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>