MobX和商店之间的连接

家伙 . 我正在开发ract mobx firebase应用程序 . 我想将我的app逻辑分成3个商店：

• authStore - 存储，其中发生所有firebase auth操作

• 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 };

然后将该商店导入他们需要的地方 .

现在我有一些问题：

• 如果我需要从authStore接收 currentUser.uid ，如何在 userStore 构造函数中设置 userStore.user ？我帮助，因为两个观察者（ authStatusChange 和 userRef.on(‘value’) 必须放在商店构造函数中（我是对的吗？） . 因为我在开始时创建 storeClass 的实例 - 他们在 auth.currentUser 之前实例化从服务器获得肯定响应 . 我解决了这个问题，通过在两个商店中插入 authStatusChange 观察者，但我认为这不是一个好的解决方案

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

• db中的用户有字段 - project . Project是深度嵌套的对象，我用它来描述用户项目结构并在前面显示 . 当用户进入编辑器 - 编辑器组件时，将此项目拆分为块 . 每个块都有自己的样式属性，用户可以编辑 . 因此，当用户选择某个块时，通过使用 @action setCurrentBlock 将该块写入 editorStore 作为 currentBlock 可观察对象，并且作为参数接收对所选块的引用 .

class 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（）; export ;

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

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

谢谢你的帮助;）