Single-atom catalysts for high-energy rechargeable batteries
Single State Atom apps
-
Upload
rogerio-chaves -
Category
Software
-
view
390 -
download
0
Transcript of Single State Atom apps
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