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/955339/images/5446228/pasted-from-clipboard.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!'
Let's open up your Microsoft Excel or LibreOffice Calc
Ex. Spreadsheet
Observable values: all data cells that have values
Computed values: formulas and charts that can be derived from the data cells and other formulas
Reaction: drawing the output of a data cell or a formula of the screen
Action: changing a data cell or formula
@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)
Mobx Flow
![](https://s3.amazonaws.com/media-p.slid.es/uploads/955339/images/5446237/pasted-from-clipboard.png)
Actions
Events invoke actions.
Actions are the only
and may have other
side effects
@action onClick = () => {
this.props.todo.done = true;
}
State
State is observable and minimally
defined. Should not contain
redundant or derivable data. Can
be a graph, contain classes, arrays, refs, etc.
@observable todos = [{
title: "learn Mobx",
done: false
}]
Computed values
Computed values are values that
can be derived from the state
using a pure function. Will be
updated automatically by Mobx
and optimized away if not use.
@computed get completedTodos() {
return this.todos.filter(
todo => todo.done
)
}
Reactions
Reactions are like computed
values and react to state
changes. But they produce a
side effect instead of a value,
like updating the UI.
const Todos = observer({ todos }) =>
<ul>
todos.map(todo => <TodoView ... />
</ul>
}
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
What is MobX
By Devlin Duldulao
What is MobX
Introduction to MobX: A Simple State Management Solution
- 601