MobX根据已建立的值创建并引用基于值的新的Observable

在我的应用程序的一个功能中，我正在与Firebase进行同步以获取活动事件的列表。这样做的主要结果意味着可观察值将被实时重复设置。这很好，但它导致了一些MobX麻烦。为了演示，看看相关的商店：MobX根据已建立的值创建并引用基于值的新的Observable

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本质上是做同样的事情）。我想实现是这样的：

的状态是空的，由原始存储状态
我subscribe()功能的变化this.currentEvents孩子的价值观，这将触发反应，创造新观测指定，并将它们订阅到数据库中的相应路径

由于这些可观察值被subscribe()更改，所以我的React组件的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> 
     ); 
    } 
}

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

来源

2017-04-10 MayorMonty

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

来源

2017-04-11 08:19:10 mweststrate

MobX根据已建立的值创建并引用基于值的新的Observable

回答

相关问题