MobX는 기존 Observable 내부의 값을 기반으로 새로운 Observable을 만들고 참조합니다.

Question

내 응용 프로그램 기능 중 하나에서 Firebase와 동기화하여 활성 이벤트 목록을 가져옵니다. 이 결과의 주된 결과는 관측 대상이 실시간으로 반복적으로 설정된다는 것을 의미합니다. 이것은 훌륭하지만 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 기능을합니다 (setTimeout은 본질적으로 같은 일을) 지정된 관찰에 내 데이터베이스의 특정 부분을 결합합니다. 내가 달성하기 위해 시도하고 같은 수 있습니다 :

내 subscribe() 기능은 새로운 관찰 가능한을 만들 반응을 유발 this.currentEvents의 아이의 값을 변경 원래 상태를 저장에 의해 지정된

1. 상태는, 비어있는, 데이터베이스의 해당 경로에 구독하십시오.

2. 이 관찰 결과가 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()

).