Question

我有两家商店，第二家商店应该根据第一家商店的更新进行更新。第一家商店：

import {decorate} from 'mobx';
export class EntryStore {
    constructor (parent_store) {
        this.parent_store = parent_store;
        this.entries = [];
        console.log('----------------------');
        setTimeout(() => this.entries.push({event: 0, id: 0}), 1000);
        console.log('constructed;')
    }
}

decorate(EntryStore, {
    entries: observable,
});

第二家商店：

import {decorate, reaction} from 'mobx';
export class EventStore {
    constructor(parent_store) {
        this.parent_store = parent_store;
        this.events = new Map();
        this.entry_load_disposer = reaction(
            () => this.parent_store.entryStore.entries.map(e => e),
            async (event_ids) => {
                console.log('we are getting events');
                return this.loadSomeDataPromise();
            }
        );
    }
}

decorate(EventStore, {
    events: observable,
});

为了完整起见，“ parent_store”：

import {EventStore} from "./EventStore";
import {EntryStore} from "./EntryStore";

export default class RootStore {
    constructor() {
        this.entryStore = new EntryStore(this);
        this.eventStore = new EventStore(this);
    }
}

我希望这反应“在加载entryStore之后立即运行”。但是事实并非如此，反应根本没有进行。怎么来的？我在哪里弄错了？

Answer 1

尝试从地图中取消引用返回数组的length属性，如下所示：

   this.entry_load_disposer = reaction(
        () => this.parent_store.entryStore.entries.map(e => e).length,
        (event_ids) => {
            console.log('we are getting events');
            return this.loadSomeDataPromise();
        },
       {
        fireImmediately: true
       }
    );

我建议您也删除异步，除非有原因。还要检查Understanding what MobX reacts to

在构造函数中存储更新时未调用反应；

1 个答案: