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函数将我的数据库的特定部分绑定到指定的observable（setTimeout基本上做同样的事情）。我想要实现的是：

状态为空，由原始商店状态
我的subscribe()函数更改了this.currentEvents的子项的值，这会触发创建新的observable的反应，并将它们订阅到数据库中的相应路径

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

这看起来应该很容易，但我很挣扎。我做错了吗？有更好的方法吗？非常欢迎任何建议！

Answer 1

没有阅读剩下的问题，但这不会飞：reaction(() => Object.keys(this.currentEvents)。 Mobx无法跟踪对象的键添加，因此对于动态键控数据结构，使用来自mobx的内置映射，例如：activeEvents = observable.map()

MobX根据已建立的Observables中的值创建和引用新的Observable

1 个答案: