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

[Mobx] Use MobX actions to change and guard state的更多相关文章

  1. 【MobX】MobX 简单入门教程

    一.MobX 介绍 首先看下官网介绍: MobX 是一个经过战火洗礼的库,它通过透明的函数响应式编程(transparently applying functional reactive progra ...

  2. [Mobx] Using mobx to isolate a React component state

    React is great for diffing between Virtual-DOM and rendering it to the dom. It also offers a naïve s ...

  3. FCC---Use CSS Animation to Change the Hover State of a Button---鼠标移过,背景色变色,用0.5s的动画制作

    You can use CSS @keyframes to change the color of a button in its hover state. Here's an example of ...

  4. M1事后分析报告--We have power to change the origin state

    M1事后分析报告 设计与实现 我们发的软件解决的问题?是否满足后面小组的要求?是否能够完全拟合前期目标? 答: 前期我们的软件完成量并不是特别让人满意,我们组在完成这些任务量之后,发现有很多地方是在做 ...

  5. 你需要Mobx还是Redux?

    在过去一年,越来越多的项目继续或者开始使用React和Redux开发,这是目前前端业内很普遍的一种前端项目解决方案,但是随着开发项目越来越多,越来越多样化时,个人又有了不同的感受和想法.是不是因为已经 ...

  6. [Web] How to Test React and MobX with Jest

    转载自: https://semaphoreci.com/community/tutorials/how-to-test-react-and-mobx-with-jest?utm_content=bu ...

  7. Redux/Mobx/Akita/Vuex对比 - 选择更适合低代码场景的状态管理方案

    近期准备开发一个数据分析 SDK,定位是作为数据中台向外输出数据分析能力的载体,前端的功能表现类似低代码平台的各种拖拉拽.作为中台能力的载体,SDK 未来很大概率会需要支持多种视图层框架,比如Vue2 ...

  8. 十分钟介绍mobx与react

    原文地址:https://mobxjs.github.io/mobx/getting-started.html 写在前面:本人英语水平有限,主要是写给自己看的,若有哪位同学看到了有问题的地方,请为我指 ...

  9. [Web 前端] mobx教程(三)-在React中使用Mobx

    copy from : https://blog.csdn.net/smk108/article/details/85053903 Mobx提供了一个mobx-react包帮助开发者方便地在React ...

随机推荐

  1. python yield学习

    yield的功能类似于return,但是不同之处在于它返回的是生成器. 生成器生成器是通过一个或多个yield表达式构成的函数,每一个生成器都是一个迭代器(但是迭代器不一定是生成器). 如果一个函数包 ...

  2. 学习《深度学习与计算机视觉算法原理框架应用》《大数据架构详解从数据获取到深度学习》PDF代码

    <深度学习与计算机视觉 算法原理.框架应用>全书共13章,分为2篇,第1篇基础知识,第2篇实例精讲.用通俗易懂的文字表达公式背后的原理,实例部分提供了一些工具,很实用. <大数据架构 ...

  3. 摄像头驱动——V4L2框架分析

    一.概述 Video for Linux 2,简称V4l2,是Linux内核中关于视频设备的内核驱动框架,为上层的访问底层的视频设备提供了统一的接口. 摄像头驱动是属于字符设备驱动程序.(分析linu ...

  4. python数据处理技巧一

    字符串赋值(传参)技巧 Python中一般的字符串赋值的方式如下: variable = "Test" print "I just [%s] unit"%var ...

  5. 洛谷——P1043 数字游戏

    https://www.luogu.org/problem/show?pid=1043 题目描述 丁丁最近沉迷于一个数字游戏之中.这个游戏看似简单,但丁丁在研究了许多天之后却发觉原来在简单的规则下想要 ...

  6. 40.Node.js Web 模块

    转自:http://www.runoob.com/nodejs/nodejs-module-system.html 什么是 Web 服务器? Web服务器一般指网站服务器,是指驻留于因特网上某种类型计 ...

  7. 2017-百度之星 初赛-B

    1001 Chess Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total ...

  8. Highcharts使用的一些总结

    Highcharts 是一个用纯 JavaScript 编写的一个图表库, 能够很简单便捷的在 Web 网站或是 Web 应用程序添加有交互性的图表,并且免费提供给个人学习.个人网站和非商业用途使用. ...

  9. 【Codecraft-18 and Codeforces Round #458 (Div. 1 + Div. 2, combined) B】 Conan and Agasa play a Card Game

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 最大值出现次数是偶数. 那么就取次大值. 次大值也是偶数? =>再次 因为你绝对不能取偶数个的. 取了对方就总是能面对一个奇数 ...

  10. 【2017 Multi-University Training Contest - Team 2】Maximum Sequence

    [Link]:http://acm.hdu.edu.cn/showproblem.php?pid=6047 [Description] 给你一个数列a和一个数列b; 只告诉你a的前n项各是什么; 然后 ...