zoukankan      html  css  js  c++  java
  • [Mobx] Use MobX actions to change and guard state

    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
  • 相关阅读:
    Maven学习总结
    excel 拷贝数据到 plsql 报 is not a valid date and time
    Spring使用Quartz定时调度Job无法Autowired注入Service的解决方案
    Python开发【第二十二篇】:Web框架之Django【进阶】
    Python开发【第二十一篇】:Web框架之Django【基础】
    Python之路【第二十篇】:Python操作 RabbitMQ、Redis、Memcache、SQLAlchemy
    Python开发【第十九篇】:Python操作MySQL
    Python开发【第十八篇】:MySQL(二)
    Python开发【第十六篇】:AJAX全套
    Python开发【第十五篇】:Web框架之Tornado
  • 原文地址:https://www.cnblogs.com/Answer1215/p/7499302.html
Copyright © 2011-2022 走看看