MobX crée et référence de nouveaux Observables basés sur des valeurs à l'intérieur des observables établis

Question

Dans l'une des fonctionnalités de mon application, je me synchronise avec Firebase pour obtenir une liste d'événements actifs. Le résultat primaire de ceci signifie que l'observable sera placé à plusieurs reprises en temps réel. C'est génial, mais cela a conduit à des problèmes avec MobX. Pour démontrer, jetez un oeil à la boutique pertinente:

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

Ici, la fonction subscribe se lier à une partie spécifique de ma base de données à l'observable spécifiée (la setTimeout fait essentiellement la même chose). Ce que je suis en train de réaliser est tel:

1. L'état est vide, comme spécifié par l'état original du magasin
2. Ma fonction subscribe() modifie les valeurs des enfants de this.currentEvents, ce qui déclenche une réaction à créer de nouveaux observables, et les abonner à leur chemin approprié dans la base de données

3. Comme ces observables sont modifiés par subscribe(), la fonction render() de mes composants React change. Voir ci-dessous pour cette source

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

Cela semble que ce devrait être assez facile à faire, mais je me bats. Est-ce que je fais cela mal? Est-ce qu'il y a une meilleure approche? Tout conseil est le bienvenu!

Answer 1

N'a pas lu le reste de la question, mais cela ne va pas voler: reaction(() => Object.keys(this.currentEvents). Mobx ne peut pas suivre l'ajout de clés à un objet, donc pour les structures de données à clé dynamique, utilisez les cartes intégrées de mobx, par exemple: activeEvents = observable.map()