问题:Mobx - runInAction() 用法。为什么我们需要它?

我已经阅读了有关此主题的各种网站,但我还没有弄清楚为什么我们需要runInAction方法以及它是如何工作的。

有人可以向我解释一下runInAction的功能吗?

谢谢。

解答

简短的回答是:你并不真的需要runInAction。您可以编写一个应用程序而不使用它,它应该可以正常工作。

但是,如果您正在处理更大的代码库,并且想要强制执行一些最佳实践,则可以使用 mobx 功能"enforce actions / strict mode",它基本上强制必须对状态进行任何修改在动作内部。 这很有用,因为动作使状态变化的原因变得显而易见,并且它们在 mobx 开发工具中提供了有用的调试信息。

通过使用这个配置标志,如果你试图在一个动作之外修改状态,mobx 会抛出一个错误。

好的,runInAction是什么?

这是一个没有runInAction的例子:

loadWeather = city => {
  fetch(
    `https://abnormal-weather-api.herokuapp.com/cities/search?city=${city}`
  )
    .then(response => response.json())
    .then(data => {
      this.setWeatherData(data);   //   <==== here
    });
};


@action
setWeatherData = data => {
  this.weatherData = data;   
};

由于我们使用的是严格模式,我们必须定义一个新动作来设置 weatherData。

当必须定义一个动作只使用一次时,这很快就会变得乏味。

runInAction来使它更短:

loadWeatherRunInThen = city => {
  fetch(`https://abnormal-weather-api.herokuapp.com/cities/search?city=${city}`)
    .then(response => response.json())
    .then(data => {
      runInAction(() => {
        this.weatherData = data;         // <====== We dont have to define an action
      });
    });
};

所以基本上,runInAction采用一段代码并在匿名操作中执行它,而不必手动为其创建操作。

有关更多信息,请查看以下链接:

• https://github.com/mobxjs/mobx/blob/mobx4and5/docs/refguide/action.md#runinactionname-thunk

• https://github.com/mobxjs/mobx/blob/mobx4and5/docs/refguide/api.md#configure

• https://www.leighhalliday.com/mobx-async-actions

编辑:

上面的答案是在 Mobx 4 时代左右。

对于 Mobx 6:

默认情况下,MobX 6 及更高版本要求您使用操作来更改状态。但是,您可以配置 MobX 以禁用此行为。

新文档的链接:

https://mobx.js.org/actions.html#runinaction

https://mobx.js.org/actions.html#disabling-mandatory-actions-

https://mobx.js.org/configuration.html#enforceactions