MobX erstellt und referenziert neue Observables basierend auf Werten innerhalb etablierter Observables

Question

In einer der Funktionen meiner Anwendung synchronisiere ich mit Firebase, um eine Liste aktiver Ereignisse zu erhalten. Das primäre Ergebnis davon bedeutet, dass das Observable wiederholt in Echtzeit gesetzt wird. Das ist großartig, aber es hat zu einigen MobX-Problemen geführt. Um zu demonstrieren, werfen Sie einen Blick auf die relevanten Speicher:

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(); 

Hier wird die subscribe Funktion einen bestimmten Teil meiner Datenbank mit dem angegebenen beobachtbaren binden (die setTimeout tut im Wesentlichen die gleiche Sache). Was ich versuche zu erreichen ist so:

1. Der Zustand leer ist, wie sie in dem ursprünglichen Speicher Zustand
2. Meine subscribe() Funktion die Werte der Kinder von this.currentEvents ändert angegeben, die eine Reaktion auslöst neue Observablen zu schaffen, und abonnieren sie ihren entsprechenden Pfad in der Datenbank

3. Da diese Observables von subscribe() geändert werden, ändert sich die render() Funktion meiner React Component. Siehe unten für diese Quelle

   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> 
        ); 
       } 
   } 
   

Dies scheint es ziemlich einfach sein sollte zu tun, aber ich bin zu kämpfen. Mache ich das falsch? Gibt es einen besseren Ansatz? Jeder Rat ist sehr willkommen!

Answer 1

Ich habe den Rest der Frage nicht gelesen, aber das wird nicht fliegen: reaction(() => Object.keys(this.currentEvents). Mobx kann das Hinzufügen von Schlüsseln zu einem Objekt nicht verfolgen. Verwenden Sie daher für dynamisch verschlüsselte Datenstrukturen die integrierten Zuordnungen von mobx, z. B. activeEvents = observable.map()