Chris Pearce
Front-end Engineer at Lystable
@chrisui
Slide 3
Slide 3 text
What is Redux?
Slide 4
Slide 4 text
“Redux is a predictable state container
for JavaScript apps.”
Actions Reducer Store View
Slide 5
Slide 5 text
Actions Reducer Store View
{type: ‘AUTH_USER’, userId: ‘1’}
Do Something
Slide 6
Slide 6 text
Actions Reducer Store View
function reduceAppState(state, action) {
if (action.type === ‘AUTH_USER’) {
return {...state, loggedIn: true};
}
}
Translate
Slide 7
Slide 7 text
Actions Reducer Store View
const store = createStore(reducer);
store.subscribe(render);
// later
store.dispatch(action);
OMG Redux!
Slide 8
Slide 8 text
Actions Reducer Store View
const App = ({state}) => (
{state.loggedIn ? ‘Yay!’ : ‘Boo!`}
);
Render
Slide 9
Slide 9 text
Okay, so how the hell do we
build a real app?
Slide 10
Slide 10 text
What is Lystable?
Slide 11
Slide 11 text
Redux at Lystable
What worked?
Slide 12
Slide 12 text
Immutable.js
Slide 13
Slide 13 text
Data Persistence
Slide 14
Slide 14 text
Awesome Middleware
Slide 15
Slide 15 text
Normalised State
(and JSON-API)
Slide 16
Slide 16 text
Selectors
Slide 17
Slide 17 text
Selectors state = local db
selectors = query
Slide 18
Slide 18 text
Selectors
(and reselect)
Slide 19
Slide 19 text
Redux at Lystable
What didn’t work?
Slide 20
Slide 20 text
Taking “top down data”
a little too literally
Slide 21
Slide 21 text
Taking “top down data”
a little too literally
Lower “Containers”
Slide 22
Slide 22 text
Service orientated
architecture
1-1 mapping with api/resources
API/users -> users-actions.js
users-reducer.js
users-selectors.js
API/clients -> clients-actions.js
clients-reducer.js
clients-selectors.js
Slide 23
Slide 23 text
Service orientated
architecture
User Experience
Orientated Architecture
1-1 mapping with routes
(at its min. granularity)
index -> index-screen-actions.js
index-screen-reducer.js
index-screen-selectors.js
Slide 24
Slide 24 text
Imperative
data fetching
Slide 25
Slide 25 text
Imperative
data fetching
Slide 26
Slide 26 text
Imperative
data fetching
Declarative
data fetching
Slide 27
Slide 27 text
So has Redux been successful?
Slide 28
Slide 28 text
Yes! Just don’t underestimate the big
decisions you are still left to make
yourself. It is incredibly low level.
Slide 29
Slide 29 text
No content
Slide 30
Slide 30 text
No content
Slide 31
Slide 31 text
Redux is awesome but we need to realise
the scope and build more opinionated
tools and frameworks around it.