[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
[Mobx] Use MobX actions to change and guard state的更多相关文章
- 【MobX】MobX 简单入门教程
一.MobX 介绍 首先看下官网介绍: MobX 是一个经过战火洗礼的库,它通过透明的函数响应式编程(transparently applying functional reactive progra ...
- [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 ...
- 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 ...
- M1事后分析报告--We have power to change the origin state
M1事后分析报告 设计与实现 我们发的软件解决的问题?是否满足后面小组的要求?是否能够完全拟合前期目标? 答: 前期我们的软件完成量并不是特别让人满意,我们组在完成这些任务量之后,发现有很多地方是在做 ...
- 你需要Mobx还是Redux?
在过去一年,越来越多的项目继续或者开始使用React和Redux开发,这是目前前端业内很普遍的一种前端项目解决方案,但是随着开发项目越来越多,越来越多样化时,个人又有了不同的感受和想法.是不是因为已经 ...
- [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 ...
- Redux/Mobx/Akita/Vuex对比 - 选择更适合低代码场景的状态管理方案
近期准备开发一个数据分析 SDK,定位是作为数据中台向外输出数据分析能力的载体,前端的功能表现类似低代码平台的各种拖拉拽.作为中台能力的载体,SDK 未来很大概率会需要支持多种视图层框架,比如Vue2 ...
- 十分钟介绍mobx与react
原文地址:https://mobxjs.github.io/mobx/getting-started.html 写在前面:本人英语水平有限,主要是写给自己看的,若有哪位同学看到了有问题的地方,请为我指 ...
- [Web 前端] mobx教程(三)-在React中使用Mobx
copy from : https://blog.csdn.net/smk108/article/details/85053903 Mobx提供了一个mobx-react包帮助开发者方便地在React ...
随机推荐
- JS之预编译和执行顺序(全局和函数)
预编译的两种情况 全局: 1.全局 直接是script标签中的代码,不包括函数执行 执行前: 1.首先生成一个GO(global object)对象,看不到,但是可以模拟出来用来分析 2.分析变量声明 ...
- Reference Counting GC (Part one)
目录 引用计数法 计数器值的增减 new_obj()和update_ptr()函数 new_obj()生成对象 update_ptr()更新指针ptr,对计数器进行增减 优点 可即可回收垃圾 最大暂停 ...
- IsoAlgo3d三维管道软件
IsoAlgo3d三维管道软件 eryar@163.com 1.概述 IsoAlgo3d三维管道软件主要用于将目前国际主流管道设计软件AVEVA PDMS和Intergraph SmartPlatn3 ...
- (JavaScript基础向)日常小发现:forEach等函数的第二个参数的用法
forEach函数用得平时用得比较多,但是从来没想到forEach函数还有第二个参数. 这里是菜鸟教程对forEach函数的详细说明:forEach的详细说明. 如上图,forEach函数有第二个参数 ...
- Jquery Validator 增加自定义验证方法
$(document).ready(function () { jQuery.validator.addMethod("namerepeate", function(value, ...
- mysql判断一个字符串是否包含某子串 【转】
文章出处:mysql判断一个字符串是否包含某子串 使用locate(substr,str)函数,如果包含,返回>0的数,否则返回0 例子:判断site表中的url是否包含'http://'子串, ...
- sqlserver 运行正則表達式,调用c# 函数、代码
--1.新建SqlServerExt项目,编写 C# 方法生成 SqlServerExt.dll 文件 using System; using System.Data; using System.Da ...
- OpenCASCADE Job - 深圳鞋博士
鞋博士 鞋博士经过8年沉淀,在鞋类工业4.0全流程平台上积累了相当的技术实力,获投资商亲睐. 新的一年,在投资商协助下,将踏上新的征途,因此诚邀您加盟顶层技术合伙人. 如果您具备以下实力,我们期待您的 ...
- c# 查询sql 返回多个參数
1.依据须要查询mysql 语句,返回三个须要的參数,不是数据集 2.编写函数例如以下: public static void GetParas(string 条件1, out string 返回值1 ...
- JavaScript--Module模式
//module: Module模式是JavaScript编程中一个非常通用的模式 window.onload = function() { //1.基本使用: var MyFn = function ...