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
Practical React with MobX
By Matt Ruby
Practical React with MobX
MobX and React, now you know you're in trouble...
- 4,266