Single State Atom apps

SINGLE STATE ATOM APPS

2

state =if

3

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

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

BUT HOW DO WE UPDATE THE STATE?

REACT + CURSOR

6

or atom, or zipper

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)

CLOJURESCRIPT + OMSingle state atom

8

9

AWESOME DEMOhttps://youtu.be/5yHFTN-_mOo

10

TODOMVC EXAMPLE

REACT + REDUX

11

Reduce FTW

R

WHAT IS A REDUCER?

12

const list = [1, 2, 3]

list.reduce((accumulated, current) => { return accumulated + current}, 5)

// 11

REDUX STRUCTURE

13

main

<foo> <bar>

<qux>

stateactions

user input

reduce

onChange

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

TODOMVC EXAMPLE

16

REDUX DEVTOOLS

ELM

17

The right way is the only way

18

EXAMPLE

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

WHY IS THIS HAPPENING ON FRONT-END?

21

EXAMPLES SOURCE CODEgithub.com/rogeriochaves/single-state-atom-apps

THANK YOU