Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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/

Chris Pearce

February 29, 2016
Tweet

More Decks by Chris Pearce

Other Decks in Programming

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