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 full-size slide

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

    View full-size slide

  3. What is Redux?

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    {state.loggedIn ? ‘Yay!’ : ‘Boo!`}

    );
    Render

    View full-size slide

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

    View full-size slide

  10. What is Lystable?

    View full-size slide

  11. Redux at Lystable
    What worked?

    View full-size slide

  12. Immutable.js

    View full-size slide

  13. Data Persistence

    View full-size slide

  14. Awesome Middleware

    View full-size slide

  15. Normalised State
    (and JSON-API)

    View full-size slide

  16. Selectors state = local db
    selectors = query

    View full-size slide

  17. Selectors
    (and reselect)

    View full-size slide

  18. Redux at Lystable
    What didn’t work?

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  21. 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 full-size slide

  22. 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 full-size slide

  23. Imperative
    data fetching

    View full-size slide

  24. Imperative
    data fetching

    View full-size slide

  25. Imperative
    data fetching
    Declarative
    data fetching

    View full-size slide

  26. So has Redux been successful?

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  29. Questions?
    @chrisui

    View full-size slide