Mobx Autorun在实践中

Question

我正试图让Mobx的自动运行正常工作.

我的用例是我有一个模型,我喜欢在更改时序列化(或脱水)并将该信息添加到另一个模型的数据中.这给我带来了模范国家的基本时间旅行.两者都是可观察的.

编辑:模型分离的想法是,一个是应用程序的数据模型,其他应该是我可以从应用程序使用的完全独立的库.我需要定期跟踪应用程序中的更改,但在同一页面上显示状态工具的UI.

现在,autorun似乎对我实际跟踪的内容做出了自己的推论.当我在观察模型的实例化中移动模型实例时,在发生更改时不再调用自动运行.在模块顶层创建模型实例时,它按预期工作.这是我只更改了观察模型的一个属性(每个自动运行调用都会改变的属性).当我在观察模型中尝试同时更改两件事时,现在也要求自动运行这些更改,从而导致无休止的循环(Mobx捕获).

我想知道如何用更清晰的方式来表达我正在跟踪的自动运行功能,或者还有其他方法可以跟踪模型更改并在发生任何事情时更新其他模型.

---

用代码示例编辑.

这就是我所做的(大大简化):

class DataModel {
    @observable one_state = null;
}

class StateStore {
    @observable states = [];
}

let data = new DataModel();
let store = new StateStore();

autorun(() => {
   store.states.push(data.one_state);
   console.log("new data", toJSON(store.states));
});

data.one_state = "change 1";
data.one_state = "change 2";

这就形成循环依赖,因为自动运行被调用的两个原始数据模型的变化和所产生的储存改变,而我只是在跟踪更改前感兴趣.

---

使用工作结果编辑:

class DataModel {
    @observable one_state = null;
}

class StateStore {
    @observable states = asFlat([]);
}

let data = new DataModel();
let store = new StateStore();

autorun(() => {
   store.states.push(data.one_state);
});

data.one_state = "change 1";
data.one_state = "change 2";

根据@mweststrate的回答,使用带有存储状态变量的asFlat并从autorun中删除日志记录打破了问题循环.

Answer 1

没有任何实际代码,回答这个问题有点困难.你能分享一些代码吗？但是请注意,如果你做一个小小的思维转换,MobX效果最好:而不是命令性地说"如果X发生Y应该改变",最好说"Y可以从X派生".如果按照这些思路思考,MobX将真正开始闪耀.

因此,我认为其中一个应该是另一个的推导(通过使用计算确实),而不是有两个可观察的模型.那有意义吗？否则,请随意详细说明您的问题:)

编辑:

好的,谢谢你的代码.您应该删除日志语句以避免它循环; 目前你记录状态模型,所以每次更改时,自动运行将运行,添加第一项(再次!),更改stateModel等...

其次,我不确定状态列表是否应该是可观察的,但至少其内容不应该是可观察的(因为它是一个快照,每个状态的数据不应该改变).为了表达这一点,您可以使用asFlat修饰符,该修饰符指示状态集合应该只能是浅层可观察的:@observable states = asFlat([]).

这是否回答你的问题？