0
在我的應用程序的一個功能中,我正在與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> ); } }
這似乎是它應該是很容易做到的,但我掙扎。我做錯了嗎?有更好的方法嗎?任何建議是非常歡迎的!