时间戳

首页 > 解决方案 > 在构造函数中存储更新时不调用反应；

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

问题描述

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

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 后立即”运行。但是它没有，反应根本没有运行。怎么来的？我在哪里做错了？

标签： javascriptreactive-programmingmobx

解决方案

尝试从映射中取消引用返回数组的长度属性，如下所示：

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

我建议您也删除异步，除非它存在的原因。另请查看了解 MobX 的反应

推荐阅读