MobX state-based 反应与事件

Question

MobX 就像一个电子表格，一切都来自状态。甚至像 autorun.

这样的效果

我的问题是不清楚何时运行基于某些事件触发的效果，而不是基于 state-change（使用 autorun 或类似的东西） .

例如，假设我需要在满足 3 个特定条件（从状态派生）后取一些牛奶（导致 HTTP 请求的操作 - 因此是一种效果）。我可以使用 when 到运行这个 side-effect:

when(
    () => {
        if (
            self.isOnConfirmationPage &&
            paymentStore.successfullySubscribed &&
            calendarStore.isFriday
        ) {
            return true;
        }
        return false;
    },
    () => self.fetchMilk(),
);

一个新的要求要求我添加一些日志记录。具体来说，我需要调用一个 track() 服务（另一个 HTTP 请求，因此产生另一个效果），但是这个 track() 服务取决于 fetchMilk() 服务返回的数据.

现在我可以简单地将 .then() 添加到我的 fetchMilk 中：

self.fetchMilk().then(milkResponse => self.track(
   milkResponse.user,
   milkResponse.order
))

回到我的问题标题，这对我来说是 "reacting based on an event" - 在这种情况下，事件是 fetchMilk() 服务的响应。

如果我只是根据 state-change 而不是事件做出反应怎么办？

这意味着 track() 也需要放在反应中，因为它取决于 fetchMilk() 的反应，我可以简单地将其存储在 MobX 存储中并对其做出反应：

when(
    () => {
        if (
            self.milk.user &&
            self.milk.order
        ) {
            return true;
        }
        return false;
    },
    () => self.track(self.milk.user, self.milk.order),
);

请注意，我没有使用 "promise-based" 流程来处理异步行为，我只是根据值的变化做出反应。

我的问题：我应该使用这两个选项中的哪一个？每种方法的 benefits/cons 是什么？使用第二种方法对异步行为建模是否安全？

Answer 1

我会选择 promise.then() 版本，因为它更容易遵循代码流程。没有规定必须设置应用程序中的所有内容，以便所有代码都由 mobx 操作和反应驱动。

当您希望将应用中的更改广播到全世界时，您就进入了 mobx 世界。

仔细想想，mobx 就像一个事件派发器，但事件派发代码（订阅和通知）隐藏在 mobx 魔法的背后。所以根据我的经验，最好的选择是完成所有你需要做的异步工作，然后 notify mobx 的变化。

如果您看一下 the official documentation，它有一个使用异步代码的示例，它就是这样做的。

MobX state-based 反应与事件

MobX state-based reactions vs events

javascript

reactive-programming

mobx