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

回答

相關問題