Real World Redux

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/

2c4d5ca71a92e0860a78e4f9e50e4406?s=128

Chris Pearce

February 29, 2016
Tweet

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.
  29. None
  30. None
  31. Redux is awesome but we need to realise the scope

    and build more opinionated tools and frameworks around it.
  32. Questions? @chrisui