counter example using mobx

mobx-counter-example.js

// store.js
import {observable} from 'mobx';

class CounterStore {
  @observable counter = 0;

  increment() { this.counter++; }

  decrement() { this.counter--; }
}

export default new CounterStore();


// MyComponent.js
import React from 'react';
import {observer} from 'mobx-react';
import store from './store.js';

const Counter = () => (
  <div>
    <button onClick={() => store.increment()}>+1</button>
    <span>{store.counter}</span>
    <button onClick={() => store.decrement()}>-1</button>
  </div>
);

export default observer(Counter);

For example - how do we increment counter by 2? Mobx does not let me do it

Why there is no accessor keyword?
Documentation says:

observable annotation should always be used in combination with the accessor keyword.