MobX State Tree is an opinionated state management solution that emphasizes separating the state from UI components, utilizing reactive programming with observable state dependencies. It allows for a straightforward integration of state-driven applications and enhances performance and testability while using concepts like actions and derived data. MobX State Tree combines mutable and immutable features for better developer experience, making it a suitable alternative to Redux, particularly for larger projects.

1. MOBX STATE TREE
OPINIONATED STATE
MANAGEMENT
DBS Launch Day 2018-01-30

2. joost＠de-vries․name
codestar.nl
joost-de-vries
@jouke





3. UI & STATE MANAGEMENT
WISHLIST
Keep state separate from UI components
Keep track of what needs to be updated when
something changes
Have well defined unidirectional data flow
Easy to understand
Better performance
Easy to test
Observables!?
Basically the benefits of Redux

4. MOBX
A state dependency graph
using reactive programming
Observables
but not implemented using RxJs

5. class AppState {
@observable timer = 0;
constructor() {
setInterval(() => {
this.timer += 1;
}, 1000);
}
@action
reset() {
this.timer = 0;
}
}
Annotate attributes that should be tracked
with observable , computed or action

6. const TimerView = observer(({ appState }) => (
<button onclick="{appState.reset}">
Seconds passed: {appState.timer}
</button>
));
Use observer on components that render data

7. render(
<div>
<timerview appstate="{new" appstate()}="">
<devtools>
</devtools></timerview></div>,
document.getElementById("root")
);
Render like any React app

8. live code example

9. MOBX CONCEPTS &
PRINCIPLES

10. State drives the application
Derived directly from state are:
The UI itself
Derived data like 'todos left'
Backend integrations like sending changes to the
server

12. mobx todo

13. MOBX
Easy to understand
Mutable state
No time traveling debugger
Hard to make 'middleware' for
Lacks the immutable objects + pure functions
approach of Redux
“ Vies maar lekker”

14. MOBX STATE TREE
Interact with an OO tree of 1. data, 2. derived data 3.
actions and 4. views
The tree is typed at compile time and at runtime
Changes are only through actions
..and automatically create immutable snapshots
..and json patches

15. “Opinionated, transactional, MobX
powered state container combining the
best features of the immutable and
mutable world for an optimal DX”

16. const Todo = types
.model("Todo", {
id: types.optional(types.number, () => Math.random()),
title: types.string,
finished: false
})
.actions(self => ({
toggle() {
self.finished = !self.finished
}
}))

17. export const TodoView = observer(({ todo }) => (
<li>
<input type="checkbox" checked="{todo.finished}" onclick="{todo.toggle}">
{todo.title}
</li>
))

18. const TodoStore = types
.model("TodoStore", {
todos: types.array(Todo)
})
.views(self => ({
get unfinishedTodoCount() {
return self.todos.filter(todo => !todo.finished).length
}
}))
.actions(self => ({
addTodo(title) {
self.todos.push({ title })
},
handleChange(e) {
self.newTodoTitle = e.target.value
},
handleNewTodoClick(e) {
self.addTodo(self.newTodoTitle)
self.newTodoTitle = ""
}
}))

19. Code example

20. Todo with time travel

21. Static typing with Typescript

22. THERE'S MORE:
Unit testing
Integration with Redux devtools
Dealing with datamodels that refer to eachother
Async action using js generators
Integration with RxJs

23. Not bad for a framework from
Rotterdam

24. TO SUMMARIZE
Seems to combine the good parts of an OO
discoverability & immutability
Opinionated so suitable for bigger projects
Cohesion: adding a feature doesn't involve changes
in lots of places
Typescript support is somewhat clunky

25. Mobx ST is a good alternative to Redux

26. FURTHER
INFORMATION
M Weststrate -
Fiddle around with
The websites of Mobx and Mobx State Tree provide
a lot of information
Becoming fully reactive: how mobx
works
live code examples