mobx-box v0.0.8

mobx-box

Discussion here.

tl;dr

const store = new class {
-  @observable foo = '';
-  @observable bar = '';
-
-  @action setFoo = value => (this.foo = value);
-  @action setBar = value => (this.bar = value);
+  @box foo = '';
+  @box bar = '';
}();

console.log(store.foo); // ''
console.log(store.bar); // ''

- store.setFoo('Lorem');
- store.setBar('Ipsum');
+ // these are mobx actions (internally), not direct mutations, they don't violate strict mode
+ store.foo = 'Lorem';
+ store.bar = 'Ipsum';

console.log(store.foo); // 'Lorem'
console.log(store.bar); // 'Ipsum'

Install

yarn add mobx mobx-box

Example

import React from 'react';

import { configure } from 'mobx';
import { observer } from 'mobx-react';

import box from 'mobx-box';

configure({ enforceActions: true });

const store = new class {
  @box foo = 0;

  // or without decorators
  constructor() {
    box(this, 'bar', 0);
  }
}();

const Example = () => (
  <div>
    <button onClick={() => (store.foo = Date.now())}>{store.foo}</button>
    <button onClick={() => (store.bar = Date.now())}>{store.bar}</button>
  </div>
);

export default observer(Example);