Real World Redux

Redux has no doubt captured the hearts of the React community but many questions still remain - how do we actually structure Redux applications effectively? This talk explores the real world experiences of using Redux everyday within a rapidly scaling team and product.

Presented at "React London" - 29th February 2016

Event: https://skillsmatter.com/meetups/7887-february-london-react-user-group
Recording: https://www.youtube.com/watch?v=zmN0Vhx2Jgg

http://chrispearce.co/

Transcript

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