Mobx action

by Artur Vardanyan

HTML

<script src="https://npmcdn.com/[email protected]/lib/mobx.umd.js"></script>
<div>
  <h1>
    MOBX ACTION
  </h1>
</div>

CSS

body {
  background-color: #eee; 
}

div {
  height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

h1 {
  font-family: 'Tahoma';
  color: #262626;
}

Babel + JSX

console.clear();
const { observable, computed, when, action } = mobx;

class Store {
  @observable
  _name = 'Artur';
  
  @observable
  _age = 21;
  
  @computed
  get info() {
  	return `Age - ${this._age} Name - ${this._name}`;
  }
  
  @action // <<< here
  setNewProps(name, age) {
  	this._name = name;
    this._age = age;
  }

}

const store = new Store();

when(() => {
  return store._age > 40;
}, (...args) => {
	console.log("AHAHAHAHAH", store._age);
});


console.log('---');

store.setNewProps('Arthur', 26);
store.setNewProps('Arthur', 54);
store.setNewProps('Arthur', 1);

store.setNewProps('Arthur', 80);