Single State Atom apps

If state is the root of all evil, why don't we put it right on the root?
I'll show 3 examples

Transcript

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> state actions 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