javascript - MobX，以及商店之间的连接

伙计们
我正在ract + mobx + firebase应用程序上工作。
我想将我的应用程序逻辑分为3个存储区:

authStore -存储所有Firebase身份验证操作发生的位置

userStore -存储所有当前用户数据的位置，这些数据来自Firebase数据库

edtorStore -所有这些在编辑器组件中发生的事情。

因此，要从db接收currentUser数据，我首先需要从 fb.auth()获得 currentUser.uid 。
我的 AuthStore 如下所示:

class AuthStore {
    @observable auth = {
        authUser  : null,
        authError : null
    };

    constructor () {
        console.log ( 'start auth' );
        this.unwatchAuth = Fb.auth.onAuthStateChanged ( user => {
            console.log ( 'status changed' );
            this.auth.authUser = user;
        } );
    }

    @computed
    get currentUser () {
        console.log ( 'updated' );
        return this.auth.authUser;
    }
}

const authStore = new AuthStore ();
export { authStore };

我的 UserStore :

class CurrentUser {
    @observable user = ( {} );
    constructor () {
            this.userRef       = Fb.dbRoot.ref ( `users/${user.uid}` );
            this.userRef.on ( 'value', ( snapshot ) => {
                this.user = snapshot.val ();
            } );
        } );
    }
}

const user = new CurrentUser ();
export { user };

我导入的所有我的商店都在一家全局商店中

import { authStore } from './AuthStore';
import { user } from './CurrentUser'
import { editor } from './EditorStore'

const store = {
    authStore,
    user,
    editor
};

window.store = store;

export { store };

然后将其存储在需要的地方。

现在我有一些问题:

如果需要，如何在userStore.user构造函数中设置userStore从authStore接收currentUser.uid？
我用ve tried to import **authStore** to **userStore** and versa, but it didn帮了忙，因为两个观察者( authStatusChange 和 userRef.on(“value”)必须放在商店构造函数中(我对吗？)。
并且由于我在开始时创建了 storeClass 的实例–它们在auth.currentUser得到服务器的肯定响应之前实例化了。我通过在两个商店中插入 authStatusChange 观察程序来解决此问题，但是我认为

不是一个好的解决方案

在我的应用程序中，只有当 userStore.user 存在时才能显示某些组件，并且如果我不让用户@observable –我可以通过if(user)…进行检查，
但是因为他的可观察的if(user)返回true –因为他返回了可观察的对象。如何检查用户是否已经设置？

数据库中的用户具有字段– 项目。项目是深层嵌套的对象，我用它来描述用户项目的结构并显示在前面。
当用户输入编辑器–编辑器组件时，将该项目拆分为块。
每个块都有其样式属性，该用户可以编辑。
因此，当用户选择某个块时，通过使用 @action setCurrentBlock 将这个块写在编辑器存储中作为 currentBlock 可观察对象，并作为参数接收对所选块的引用。

类EditorStore {
@observable currentBlock = null;

constructor () {
}

@computed
get blockStyles () {
    return this.currentBlock.style
}

@action
setCurrentBlock ( block ) {
    this.currentBlock = block
}

@action
updateBlockStyle ( data ) {
    const { styleProp, value }           = data;
    this.currentBlock.style[ styleProp ] = value;
}

}

const editor = new EditorStore();
导出{编辑器};

因此，我的 editStylesPanel 组件正在显示来自 @computed blockStyles 的当前块样式值。
一切都很好，但是当我通过 @action updateBlockStyle 更改某些样式属性时，他仅更新 editorStore.currentBlock 的样式，而不会更改 user.project 的相关块中的样式。
我确信如果我发送对该对象的引用–因为t editorStore中的任何更改都必须在根对象上发生。
为什么不会发生这种情况？

最后一个问题–将存储注入(inject)组件的更好方法是什么？
通过<Provider store={…stores}>和@inject(‘store’)或按import {store} from ‘./store/store’

谢谢你的帮助;)

最佳答案

这是我在相同情况下所做的:

// src/stores/index.js

import {RouterStore} from 'mobx-router5';
import AuthStore from './AuthStore';

const stores = {};

const routerStore = new RouterStore(stores); // Provide access to other stores
const authStore = new AuthStore(stores);

stores.routerStore = routerStore;
stores.authStore = authStore;

export default stores;


// src/stores/AuthStore.js

export default class AuthStore {
    ...
    constructor(stores) {this.stores = stores}; // Keep stores reference for later
    ...
}

虽然有效，但我希望有更好的解决方案。也许this one。