[Mobx] Use MobX actions to change and guard state

最新推荐文章于 2025-09-10 19:44:49 发布

weixin_30412167

最新推荐文章于 2025-09-10 19:44:49 发布

阅读量65

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/Answer1215/p/7499302.html

本文介绍了如何利用MobX中的Actions来控制和修改应用程序的状态。通过Actions可以更好地组织代码，并与MobX React Devtools集成。文章展示了如何使用@action装饰器来确保每次状态更新都包含在一个事务中，从而便于跟踪和调试。

This lesson explains how actions can be used to control and modify the state of your application. They help you to structure your code base and integrate well with the MobX React Devtools. Actions automatically create transactions, which group changes together.

const {observable, computed} = mobx;
const {observer} = mobxReact;
const {Component} = React;
const DevTools = mobxDevtools.default;


const t = new class Temperature {
  @observable unit = "C";
  @observable temperatureCelsius = 25;

  @computed get temperatureKelvin() {
    console.log("calculating Kelvin")
    return this.temperatureCelsius * (9/5) + 32
  }
   
  @computed get temperatureFahrenheit() {
    console.log("calculating Fahrenheit")
    return this.temperatureCelsius + 273.15
  }
   
  @computed get temperature() {
    console.log("calculating temperature")
    switch(this.unit) {
      case "K": return this.temperatureKelvin + "ºK"
      case "F": return this.temperatureFahrenheit + "ºF"
      case "C": return this.temperatureCelsius + "ºC"
    }
  }
}
   
const App = observer(({ temperature }) => (
  <div>
    {temperature.temperature}
    <DevTools />
  </div>
))

ReactDOM.render(
  <App temperature={t} />,
  document.getElementById("app")
)

We have @Observable and @Computed defined, once we change any @Observable value, we can get new value in the @Computed.

But currently, the way we changing the value is though directly object mutation, such as:

t.unit = "F"

Of course, it is not good enough, what we can do is using @action to change the value:

const {observable, computed, action, transaction, useStrict} = mobx;
const {observer} = mobxReact;
const {Component} = React;
const DevTools = mobxDevtools.default;

useStrict(true);

const t = new class Temperature {
  @observable unit = "C";
  @observable temperatureCelsius = 25;

  @computed get temperatureKelvin() {
    console.log("calculating Kelvin")
    return this.temperatureCelsius * (9/5) + 32
  }
   
  @computed get temperatureFahrenheit() {
    console.log("calculating Fahrenheit")
    return this.temperatureCelsius + 273.15
  }
   
  @computed get temperature() {
    console.log("calculating temperature")
    switch(this.unit) {
      case "K": return this.temperatureKelvin + "ºK"
      case "F": return this.temperatureFahrenheit + "ºF"
      case "C": return this.temperatureCelsius + "ºC"
    }
  }

  @action setUnit(newUnit) {
    this.unit = newUnit;
  }

  @action setCelsius(degrees) {
    this.temperatureCelsius = degrees;
  }
   
  @action("update temperature and unit")
  setTemperatureAndUnit(degrees, unit) {
    this.setCelsius(degrees);
    this.setUnit(unit);
  }
}
   
const App = observer(({ temperature }) => (
  <div>
    {temperature.temperature}
    <DevTools />
  </div>
))

ReactDOM.render(
  <App temperature={t} />,
  document.getElementById("app")
)

Action can be anynomous action or named action:

@action setCelsius(degrees)
@action("update temperature and unit") // named

转载于:https://www.cnblogs.com/Answer1215/p/7499302.html