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

Question

伙计们。我正在研究 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 };

然后在他们需要的地方导入这个store。

现在我有一些问题:

1. 如果需要，我如何在 userStore.user 构造函数中设置我的 userStore从 authStore 收到 currentUser.uid？我 ve tried to import **authStore** to **userStore** and versa, but it didn t 帮助，因为两个观察者(authStatusChange 和 userRef.on('value') 必须放在存储构造函数中(我说的对吗？)。因为我在开始时创建了一个 storeClass 的实例——它们在 auth.currentUser 之前实例化，得到了服务器的肯定响应。我通过在两个商店中插入 authStatusChange watcher 解决了这个问题，但我认为这不是好的解决方案

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

3. 数据库中的用户有字段 - project。 Project 是深度嵌套的对象，我用它来描述用户项目结构并在前面显示。当用户进入编辑器时——编辑器组件将这个项目分割成 block 。每个 block 都有他的样式属性，用户可以编辑。所以当用户选择某个 block 时，这个 block 被写入 editorStore 作为 currentBlock 可观察对象，通过使用 @action setCurrentBlock，并作为参数接收对所选 block 的引用。

   类 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 的当前 block 样式值。一切都很好，但是当我通过 @action updateBlockStyle 更改某些样式属性时——他只更新了 editorStore.currentBlock 的样式，并没有更改相关 block 中的样式user.project。我确信如果我发送一个对该对象的引用——因为 t editorStore 中的任何更改都必须发生在根对象上。为什么这没有发生？

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

谢谢你的帮助;)

Answer 1

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

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