mobx

20170519

by nju33

HTML

<script src="https://unpkg.com/mobx/lib/mobx.umd.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flux/3.1.2/Flux.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flux/3.1.2/FluxUtils.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script>

Babel + JSX

mobx.useStrict(true);
const observedValue = mobx.observable.box(null)

observedValue.observe(({
  oldValue,
  newValue
}) => {
  console.log('old: %s, new: %s', oldValue, newValue);
});

const reactionDisposer = mobx.reaction(
  () => observedValue.get(),
  val => console.log('log by reaction %s: ', val)
);

mobx.action(() => observedValue.set('foo'))();
mobx.action(() => observedValue.set('bar'))();

const computedValue = mobx.computed(() => observedValue.get().toUpperCase());
const autorunDisposer = mobx.autorun(() => console.log('log by autorun: %s', computedValue.get()));

mobx.action(() => observedValue.set('baz'))();
mobx.action(() => observedValue.set('baz'))();
// observedValue.set('baz');
reactionDisposer();
autorunDisposer();

let bool = mobx.observable.box(false);
mobx.when(
  () => bool.get(),
  () => console.log('log by when %s: ', observedValue.get())
);
mobx.action(() => bool.set(true))();