javascript - MobXは、確立されたObservable内の値に基づいて新しいObservableを作成および参照します

Question

私のアプリケーションの機能の 1 つで、アクティブなイベントのリストを取得するために Firebase と同期しています。これの主な結果は、オブザーバブルがリアルタイムで繰り返し設定されることを意味します。これは素晴らしいことですが、MobX でいくつかの問題が発生しました。実証するために、関連するストアを見てみましょう。

import { observable, computed, autorun, extendObservable, reaction } from "mobx";
import { subscribe } from "./firebase";


class HomeStore {


    @observable activeEvents = {};

    @observable currentEvents = [];

    constructor() {
        console.log(this);
        // subscribe( root => root.ref("meta/activeEvents"), this.activeEvents, "object" );
        setTimeout(() => this.currentEvents["RE-VRC-16-1274"] = true, 100);
        reaction(
            () => Object.keys(this.currentEvents),
            events =>
                events.map( event =>
                    this.currentEvents[event] === true ?
                    subscribe( root => root.ref(`events/${event}`), this.currentEvents[event], "object") :
                    null
                )
            );


    }

}

export default new HomeStore();

ここで、subscribe関数はデータベースの特定の部分を指定されたオブザーバブルにバインドします (setTimeout本質的に同じことを行います)。私が達成しようとしているのは次のようなものです：

1. 元のストア状態で指定されているように、状態は空です
2. 私のsubscribe()関数は の子の値を変更しますthis.currentEvents。これにより、反応がトリガーされて新しいオブザーバブルが作成され、データベース内の適切なパスにサブスクライブされます。

3. これらのオブザーバブルが によって変更されると、React コンポーネントsubscribe()の機能が変更されます。render()そのソースについては以下を参照してください

   import { h, Component } from 'preact';
   import { List, ListItem, Icon } from 'preact-mdl';
   import { observer } from "mobx-observer";
   
   import { icon, center } from "../style";
   
   import HomeStore from "../stores/home";
   
   @observer
   export default class EventList extends Component {
   
   constructor() {
       super();
       this.store = HomeStore;
   }
   
   render() {
           console.log("EventList Renders", Object.assign({}, this.store.events));
           return (
               <List>
                       {Object.keys(this.store.currentEvents).map( event =>
                           <ListItem two-line>
                               <span class="mdl-list__item-primary-content">
                                   <Icon icon="event" class="material-icons mdl-list__item-avatar" style={icon.avatar}></Icon>
                                   <span>{ this.store.currentEvents[event].name ? this.store.currentEvents[event].name : "Loading..." }</span>
                                   <span class="mdl-list__item-sub-title">{ event }</span>
                               </span>
                           </ListItem>
                       )
                   }
               </List>
           );
       }
   }
   

これはかなり簡単にできるように思えますが、苦労しています。私はこれを間違っていますか？より良いアプローチはありますか？どんなアドバイスでも大歓迎です！