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
   

   View Slide

2. Chris Pearce
   Front-end Engineer at Lystable
   @chrisui
   

   View Slide

3. What is Redux?
   

   View Slide

4. “Redux is a predictable state container
   for JavaScript apps.”
   Actions Reducer Store View
   

   View Slide

5. Actions Reducer Store View
   {type: ‘AUTH_USER’, userId: ‘1’}
   Do Something
   

   View Slide

6. Actions Reducer Store View
   function reduceAppState(state, action) {
   if (action.type === ‘AUTH_USER’) {
   return {...state, loggedIn: true};
   }
   }
   Translate
   

   View Slide

7. Actions Reducer Store View
   const store = createStore(reducer);
   store.subscribe(render);
   // later
   store.dispatch(action);
   OMG Redux!
   

   View Slide

8. Actions Reducer Store View
   const App = ({state}) => (
   
   {state.loggedIn ? ‘Yay!’ : ‘Boo!`}
   
   );
   Render
   

   View Slide

9. Okay, so how the hell do we
   build a real app?
   

   View Slide

10. What is Lystable?
    

    View Slide

11. Redux at Lystable
    What worked?
    

    View Slide

12. Immutable.js
    

    View Slide

13. Data Persistence
    

    View Slide

14. Awesome Middleware
    

    View Slide

15. Normalised State
    (and JSON-API)
    

    View Slide

16. Selectors
    

    View Slide

17. Selectors state = local db
    selectors = query
    

    View Slide

18. Selectors
    (and reselect)
    

    View Slide

19. Redux at Lystable
    What didn’t work?
    

    View Slide

20. Taking “top down data”
    a little too literally
    

    View Slide

21. Taking “top down data”
    a little too literally
    Lower “Containers”
    

    View Slide

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
    

    View Slide

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
    

    View Slide

24. Imperative
    data fetching
    

    View Slide

25. Imperative
    data fetching
    

    View Slide

26. Imperative
    data fetching
    Declarative
    data fetching
    

    View Slide

27. So has Redux been successful?
    

    View Slide

28. Yes! Just don’t underestimate the big
    decisions you are still left to make
    yourself. It is incredibly low level.
    

    View Slide

29. View Slide

30. View Slide

31. Redux is awesome but we need to realise
    the scope and build more opinionated
    tools and frameworks around it.
    

    View Slide

32. Questions?
    @chrisui
    

    View Slide