javascript - MobX 根据已建立的 Observables 中的值创建和引用新的 Observables

Question

在我的应用程序的一项功能中，我正在与 Firebase 同步以获取活动事件列表。这样做的主要结果意味着 observable 将被实时重复设置。这很好，但它导致了一些 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函数将我的数据库的特定部分绑定到指定的 observable（setTimeout本质上做同样的事情）。我想要实现的是这样的：

1. 状态为空，由原始存储状态指定
2. 我的subscribe()函数更改了 的子级的值this.currentEvents，这会触发创建新可观察对象的反应，并将它们订阅到数据库中的相应路径

3. 随着这些 observables 的变化，我的 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>
           );
       }
   }
   

这似乎应该很容易做到，但我正在努力。我做错了吗？有更好的方法吗？非常欢迎任何建议！

Answer 1

没有阅读问题的其余部分，但这不会飞：reaction(() => Object.keys(this.currentEvents)。Mobx 无法跟踪添加到对象的键，因此对于动态键数据结构，请使用 mobx 的内置映射，例如：activeEvents = observable.map()