Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Single State Atom apps

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

Rogério Chaves

December 02, 2015
Tweet

More Decks by Rogério Chaves

Other Decks in Technology

Transcript

  1. 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
  2. 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)
  3. WHAT IS A REDUCER? 12 const list = [1, 2,

    3] list.reduce((accumulated, current) => { return accumulated + current }, 5) // 11
  4. 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"}] }; */
  5. 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