Mobx

import { observable, reaction, computed, autorun } from 'mobx';

/** You can create the observable state using observable object. */
const calculator = observable({
    a: 1,
    b: 2
});

The observable state can know the timing when some their values are changed.

import { observable, reaction, computed, autorun } from 'mobx';

const calculator = observable({
    a: 1,
    b: 2
});

reaction(
    () => calculator.a,
    (value, reaction) => {
        console.log(`a is changed to ${value}`);
    }  
);

reaction(
    () => calculator.b,
    (value, reaction) => {
        console.log(`b is changed to ${value}`);
    }
)

calculator.a = 10; /** first reaction is occured. */
calculator.b = 20; /** the second one is occured. */

reaction() function have a two parameters, The first one is the function signature, which the result of it is the value is changed.
and the second one is callback function is occured when the value is changed. and this callback function have a value is changed.

import { observable, reaction, computed, autorun } from 'mobx';

const calculator = observable({
    a: 1,
    b: 2
});

reaction(
    () => calculator.a,
    (value, reaction) => {
        console.log(`a is changed to ${value}`);
    }  
);

reaction(
    () => calculator.b,
    (value, reaction) => {
        console.log(`b is changed to ${value}`);
    }
)

/** It's like a cache */
const sum = computed(() => {
    console.log("I am calculating.");
    return calculator.a + calculator.b;
});

/** sum observe whether two calculator values are changed or not
    and It will re-calculate itself if they are changed. */
sum.observe(() => calculator.a);
sum.observe(() => calculator.b);

/** sum is re-calculating with these code. */
calculator.a = 10;
calculator.b = 20;

/** It's not happen */
console.log(sum.value);
console.log(sum.value);

import { decorate, observable, computed, autorun } from 'mobx'

class GS25 {
    basket = [];

    get total() {
        console.log("I am calculating...");
        return this.basket.reduce((prev, curr) => prev + curr.price, 0);
    }

    select(name, price) {
        this.basket.push({ name, price })
    }
}

decorate(GS25, {
    basket: observable,
    total: computed
});

const gs25 = new GS25();
autorun(() => gs25.total);
gs25.select('물', 800);
console.log(gs25.total);
gs25.select('물', 800);
console.log(gs25.total);
gs25.select('포카칩', 1500);
console.log(gs25.total);

import { decorate, observable, computed, autorun, action } from 'mobx'

class GS25 {
    basket = [];

    get total() {
        console.log("I am calculating...");
        return this.basket.reduce((prev, curr) => prev + curr.price, 0);
    }

    select(name, price) {
        this.basket.push({ name, price })
    }
}

decorate(GS25, {
    basket: observable,
    total: computed,
    select: action
});

const gs25 = new GS25();
autorun(() => gs25.total);
gs25.select('물', 800);
console.log(gs25.total);
gs25.select('물', 800);
console.log(gs25.total);
gs25.select('포카칩', 1500);
console.log(gs25.total);

Let’s use the decorator syntax.

import { observable, computed, autorun, action, transaction } from 'mobx';

class GS25 {
    @observable basket = [];

    @computed
    get total() {
        console.log('I am calculating...');
        return this.basket.reduce((prev, curr) => prev + curr.price, 0);
    }

    @action
    select(name, price) {
        this.basket.push({ name, price });
    }
}

const gs25 = new GS25();
autorun(() => gs25.total);
autorun(() => {
    if(gs25.basket.length > 0) {
        console.log(gs25.basket[gs25.basket.length - 1]);
    }
});

tansaction(() => {
    gs25.select('물', 800);
    gs25.select('물', 800);
    gs25.select('포카칩', 1500);
});

console.log(gs25.total);