This document discusses single state atom apps, which keep app state in a single source of truth (atom). It compares approaches using React with Redux or a cursor, ClojureScript with Om, and Elm. Redux uses reducers to deterministically update state from actions. Benefits include a single source of truth, deterministic state changes, and easier debugging. Examples source code is provided.

1. SINGLE STATE ATOM APPS

2. 2
state =if

3. 3
why don’t we put it
right on the root?

4. THE IDEA
4
main
<foo> <bar>
<qux>
state•State lives on the root
•Pass below only what matters
•Components just render
what it receives, no side-effects

5. 5
BUT HOW DO WE
UPDATE THE STATE?

6. REACT + CURSOR
6
or atom, or zipper

7. REACT + CURSOR
7
<List items={cursor.refine('items')} />
const List = (props) =>
<ul>
{props.items.map(ListItem)}
</ul>
const ListItem = (item) =>
<li>
{item.refine('name').value}
<NameInput name={item.refine('name')} />
</li>
const NameInput = (props) =>
<input value={props.name.value}
onChange={props.name.set} />
(not an actual implementation)

8. CLOJURESCRIPT + OM
Single state atom
8

9. 9
AWESOME DEMO
https://youtu.be/5yHFTN-_mOo

10. 10
TODOMVC EXAMPLE

11. REACT + REDUX
11
Reduce FTW
R

12. WHAT IS A REDUCER?
12
const list = [1, 2, 3]
list.reduce((accumulated, current) => {
return accumulated + current
}, 5)
// 11

13. REDUX STRUCTURE
13
main
<foo> <bar>
<qux>
stateactions
user input
reduce
onChange

14. HOW REDUX WORKS
14
const state = {
list: [{name: "une"}, {name: "due"}]
};
const actions = [{type: "ADD", name: "tre"}];
const reducer = (currentState, action) => {
switch (action.type) {
case "ADD":
return {
list: [...currentState.list, {name: action.name})
}
default:
return currentState;
}
}
actions.reduce(reducer, state); /*
{
list: [{name: "une"}, {name: "due"}, {name: "tre"}]
};
*/

15. 15
TODOMVC EXAMPLE

16. 16
REDUX DEVTOOLS

17. ELM
17
The right way is the only way

18. 18
EXAMPLE

19. ADVANTAGES
19
•Single source of truth
•Deterministic state changes
•Rationalise about the rendered UI
•State change timeline
•Easier to debug
•Hot reloading (example)
•Fast rendering
•Easier to implement optimistic updates
•Easier to have an isomorphic app
•Simple functions and data structures

20. 20
WHY IS THIS HAPPENING
ON FRONT-END?

21. 21
EXAMPLES SOURCE CODE
github.com/rogeriochaves/single-state-atom-apps

22. THANK YOU