Slide 1

Slide 1 text

Real World Redux @chrisui

Slide 2

Slide 2 text

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.

Slide 32

Slide 32 text

Questions? @chrisui