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



Chris Pearce

February 29, 2016


  1. 6.

    Actions Reducer Store View function reduceAppState(state, action) { if (action.type

    === ‘AUTH_USER’) { return {...state, loggedIn: true}; } } Translate
  2. 8.

    Actions Reducer Store View const App = ({state}) => (

    <div> {state.loggedIn ? ‘Yay!’ : ‘Boo!`} </div> ); Render
  3. 16.
  4. 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
  5. 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
  6. 28.

    Yes! Just don’t underestimate the big decisions you are still

    left to make yourself. It is incredibly low level.
  7. 29.
  8. 30.
  9. 31.

    Redux is awesome but we need to realise the scope

    and build more opinionated tools and frameworks around it.