mweststrate

const byId = (state, action) =>
  produce(state, draft => {
    switch (action.type) {
      case RECEIVE_PRODUCTS:
        action.products.forEach(product => {
          draft[product.id] = product
        })
        break
    }
  })

mweststrate

// ImmutableJS
const newMap = map.updateIn(['inMap', 'inList'], list => list.push(4))

// Immer
draft.inMap.inList.push(4)

mweststrate

const byId = produce((draft, action) => {
  switch (action.type) {
    case RECEIVE_PRODUCTS:
      action.products.forEach(product => {
        draft[product.id] = product
      })
      break
  }
})

mweststrate

const CityView = observer(({ city }) => (
    <li>
        City: {city.location} - Temperature in ℃: {city.temperature || 'Loading'}
    </li>
))

mweststrate

import { decorate, observable, flow } from "mobx"

/**
 with decorator syntax enabled
*/
class City {
    @observable location
    @observable temperature

    @action.bound

mweststrate

import { when } from "mobx"

async() => {
  await when(() => user.loggedOut)
  alert("You have been successfully logged out!")
}

mweststrate

import { decorate, observable, flow, onBecomeObserved, onBecomeUnobserved } from 'mobx'
import { log } from './log'

const APPID = '<secret>'

export class City {
    location
    temperature
    interval

mweststrate

• philosophy
• overview
  • observables
  • reactions: autorun
  • derived values: computed
  • actions

Making things observable

• observable.box
• observable.object

mweststrate

Object.defineProperty(observable([]).constructor.prototype, Symbol.isConcatSpreadable, {
   enumerable: false, configurable: true, value: true
})

mweststrate

export class AbstractNode {
    constructor(parent) {
        this.parent = parent
    }

    getDepth() {
        if (this.parent) return this.parent.getDepth() + 1
        return 0
    }