Introduction to MobX
a simple state management solution.
Redux
State Management......sound familiar?
a functional programming approach
three core principles:
1. store acts as a single source of truth
2. state is read-only and can only be changed by emitting an action
3. changes to state are made by pure functions - reducers
MobX
an object-oriented approach
key concepts:
1. actions - primary means to modify the state. They take sources of change like user events to modify the observable state.
2. observable state - any value that can be mutated.
3. computed values - derived automatically when relevant data (observable values) are modified.
4. reactions - side effects that display changes to the UI or help with logging to the console.
redux state lifecycle, a quick look
![](https://s3.amazonaws.com/media-p.slid.es/uploads/726440/images/3901374/Screen_Shot_2017-06-12_at_9.06.22_PM.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/726440/images/3901272/Screen_Shot_2017-06-12_at_8.14.48_PM.png)
Visualizing MobX: 'it's like a spreadsheet!'
@observable
![](https://s3.amazonaws.com/media-p.slid.es/uploads/726440/images/3899103/eyeglasses-clip-art-artfavor_eyeglasses_3_black_white_line_art_scalable_vector_graphics_svg-2555px.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/726440/images/3899103/eyeglasses-clip-art-artfavor_eyeglasses_3_black_white_line_art_scalable_vector_graphics_svg-2555px.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/726440/images/3901850/Screen_Shot_2017-06-13_at_12.55.15_AM.png)
- the key first step to using MobX is to set your state and mark it as observable
- this is signifying that these are values that can change over time, and that the values derived from these values must update accordingly
@computed
![](https://s3.amazonaws.com/media-p.slid.es/uploads/726440/images/3901270/images.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/726440/images/3901270/images.png)
- computed values are automatically derived from the state -- if any value that affects them changes they change with it
- everything is synchronous - they update immediately (think of the spreadsheet formula)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/726440/images/3901855/Screen_Shot_2017-06-13_at_12.56.30_AM.png)
@ @ @ @ @ @ @
what's a function decorator, anyway?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/726440/images/3901247/Screen_Shot_2017-06-12_at_7.59.59_PM.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/726440/images/3901248/Screen_Shot_2017-06-12_at_7.59.47_PM.png)
ES6 syntax for calling higher-order functions
a function that extends the behavior of a wrapped function but does not explicitly modify it.
with decorators
without decorators
![](https://s3.amazonaws.com/media-p.slid.es/uploads/726440/images/3901297/party-popper.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/726440/images/3901297/party-popper.png)
let's put it all together
![](https://s3.amazonaws.com/media-p.slid.es/uploads/726440/images/3901604/Screen_Shot_2017-06-12_at_11.14.05_PM.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/726440/images/3901624/download.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/726440/images/3901624/download.jpg)
the @observer
![](https://s3.amazonaws.com/media-p.slid.es/uploads/726440/images/3901609/images-1.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/726440/images/3901609/images-1.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/726440/images/3903101/Screen_Shot_2017-06-13_at_9.14.28_AM.png)
Redux
incredibly manual
- to update state: explicitly dispatch actions and subscribe to the store. The manual definition of middleware and reducers gives you a lot of control.
- application is predictable, testable and easy to reason about.
- lot's of boilerplate, you have to write everything yourself.
MobX
incredibly magical
- to update state: describe observable values that can be mutated and in turn mutate other values. Action dispatching and subscribing is automatic.
- application is still predictable but perhaps more difficult to test/debug.
- easier learning curve and significantly less code to write!
key differences
Copy of MobX
By Michael Corleone
Copy of MobX
Introduction to MobX: A Simple State Management Solution
- 470