Upload
rogerio-chaves
View
390
Download
0
Embed Size (px)
Citation preview
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
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)
WHAT IS A REDUCER?
12
const list = [1, 2, 3]
list.reduce((accumulated, current) => { return accumulated + current}, 5)
// 11
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"}] };*/
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
21
EXAMPLES SOURCE CODEgithub.com/rogeriochaves/single-state-atom-apps