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

No MobX observables
High level reaction
mobxReact.observer
Stateless functions
Performance discussion

Any questions?

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

Made with Slides.com