State & Mobx

Shared state between components

• Observer Pattern
• Global Variables
• Context

Mobx Core Concepts

• Observable state

• Computed values

• Reactions

  • React components

  • Custom reactions

• Actions

https://gist.github.com/mweststrate/e0d7dd9bb0d410b08c35#file-profile-jsx

decorator syntax

import { observable, computed, action } from "mobx";

class Timer {
  @observable start = Date.now();
  @observable current = Date.now();

  @computed
  get elapsedTime() {
    return this.current - this.start + "milliseconds";
  }

  @action
  tick() {
    this.current = Date.now();
  }
}

decorate utility

import { observable, computed, action } from "mobx";

class Timer {
  start = Date.now();
  current = Date.now();

  get elapsedTime() {
    return this.current - this.start + "milliseconds";
  }

  tick() {
    this.current = Date.now();
  }
}
decorate(Timer, {
  start: observable,
  current: observable,
  elapsedTime: computed,
  tick: action
});

Demo: TODO App

Challenges

MobX 4 vs MobX 5

References

https://www.javascriptstuff.com/component-communication/#6-observer-pattern

https://hackernoon.com/becoming-fully-reactive-an-in-depth-explanation-of-mobservable-55995262a254