More Practical React with MobX

Matt Ruby

@ruby_matt

State Management

var person = {
    firstName: "Matt",
    lastName: "Ruby",
    age: 37,
    fullName: function () {
        this.firstName + " " + this.lastName;
    }
};

MobX

The simple, scalable option for state management.

Mob what now?

“Just do something to the state and MobX will make sure your app respects the changes.”

  • Simple
  • Focused
  • Performant
  • Unobtrusive

Why MobX?

"Everything that can be derived from the application state, should be derived. Automatically."

Think spreadsheets

First Name Last Name Full Name
Matt Ruby Matt Ruby
Joe Schmo Joe Schmo
  • observable
  • computed
  • reactions
  • transaction
  • actions

Core MobX API

observable

computed

autorun
reaction

computed reloaded 

transaction
action

More!

  • autorunAsync
  • Atom & Reaction
  • createTransformer
  • expr
  • extendObservable
  • isObservable
  • modifiers
  • observe
  • spy
  • toJS
  • transaction
  • untracked
  • when

Babel/TypeScript + decorators

MobX + React Example

  1. No MobX observables
  2. High level reaction
  3. mobxReact.observer
  4. Stateless functions
  5. Performance discussion

Any questions?

  • https://github.com/mobxjs/mobx
  • https://github.com/mattruby/mobx-examples
  • https://github.com/mattruby/reactSwatchMobxDemo

Practical React with MobX

By Matt Ruby

Made with Slides.com

Practical React with MobX

MobX and React, now you know you're in trouble...

  • 4,310

More from Matt Ruby