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

Redux: Flux Reduced

sporto
August 31, 2015

Redux: Flux Reduced

sporto

August 31, 2015
Tweet

More Decks by sporto

Other Decks in Technology

Transcript

  1. Redux
    flux reduced
    @sebasporto

    View Slide

  2. Flux
    • Made popular by Facebook for building React
    applications
    • Old pattern (CQRS) with different naming for
    everything

    View Slide

  3. Flux
    View
    Dispatcher
    Action
    (Event)
    Users Store
    Posts Store
    Action (Event)
    Change
    Grab
    New
    state

    View Slide

  4. Flux
    Orders Stats
    1 $400
    2 $100
    ...
    Countries
    1 Aus
    2 Fra
    ...
    Aus $500
    Fra $600
    ...
    Today $ 100
    ...
    • Makes state consistency across views much easier

    View Slide

  5. Component
    Singleton Flux
    Store Dispatcher
    Message
    Get state

    View Slide

  6. Server side rendering
    • Original flux, everything is a singleton
    • Make SSR much harder
    • Each request needs its own universe

    View Slide

  7. Server side rendering
    • Flux implementations without singletons started
    showing up
    • Alt, Fluxible, Flummox, etc

    View Slide

  8. Request
    arrives
    Render
    Tree
    Pass everything
    Response
    Server side rendering
    Create users store
    Create orders store
    Create dispatcher

    View Slide

  9. Problem
    • Too many things to instantiate
    and pass around

    View Slide

  10. What if we only have one
    state object?
    Users store
    Orders store
    Countries store
    Reduced to
    {
    users
    orders
    countries
    }

    View Slide

  11. Redux only has
    one big state tree
    Less things to create and
    pass around
    ORDERS COUNTRIES
    USERS
    STATE

    View Slide

  12. Now we can just move the
    dispatcher inside the state obj
    Dispatcher
    State
    Reduced to
    {
    dispatch,
    state: {
    users
    orders
    ...
    }
    }

    View Slide

  13. Redux is only one object
    04
    State
    Dispatch
    Redux store

    View Slide

  14. Render
    Tree
    Pass store
    Response
    Server side rendering
    Create redux instance
    Request

    View Slide

  15. Traditional flux
    case 'USERS_FETCH_SUCCESS':
    users = action.users
    state.push(users)
    break
    • We manage the state on the stores

    View Slide

  16. What if we just describe
    the transformations?

    View Slide

  17. • Inspired by ELM updaters
    update action model =
    case action of
    Increment -> model + 1
    Decrement -> model - 1

    View Slide

  18. function reducer(state, action) {
    switch(action.type) {
    case 'USERS_FETCH_SUCCESS':
    users = action.users
    return state.merge(users)
    ...
    }
    }
    Reducers in Redux

    View Slide

  19. Reducers in Redux
    • The expect you to return a copy of the state, not
    mutate it
    • This is great for debugging
    • Seamless-immutable is great for this

    View Slide

  20. The state is managed by
    Redux, you only describe the
    transformations

    View Slide

  21. redux
    Redux
    View
    dispatch
    Action
    (Event)
    state
    Change
    Grab
    New
    state
    Reducers

    View Slide

  22. Components of Redux

    View Slide

  23. {
    type: 'USERS_FETCH_SUCCESS'
    users: [...]
    }
    Action

    View Slide

  24. function fetchSuccess(users)
    return {
    type: 'USERS_FETCH_SUCCESS'
    users: [...]
    }
    }
    Action creator

    View Slide

  25. const action = fetchSuccess(users)
    store.dispatch(action)
    Dispatch

    View Slide

  26. function reducer(state, action) {
    switch(action.type) {
    case 'USERS_FETCH_SUCCESS':
    users = action.users
    return state.merge(users)
    }
    }
    Reducer

    View Slide

  27. Interacting with the
    outside world? e.g. ajax

    View Slide

  28. redux
    View
    dispatch
    Async Action
    state
    Change
    Reducers
    Async Action creators
    Async action
    Request
    Response
    Action
    Run
    async
    action

    View Slide

  29. function fetch()
    return function(dispatch) {
    doSomeAjax(...)
    .then(function(response) {
    const successAction(response.data)
    dispatch(successAction)
    }
    }
    }
    Async Action creators

    View Slide

  30. Middleware
    Middleware
    redux
    View
    dispatch
    Action
    Action

    View Slide

  31. Middleware
    • Logging
    • Stoping unnecessary request
    • Async actions
    • Dev tools
    04
    03
    02
    01

    View Slide

  32. redux
    View
    dispatch
    Action
    state
    Change
    Reducers
    Redux is really simple

    View Slide

  33. Not React specific anymore
    • Just an event and state management library
    • Can be used with other things e.g. ng-redux

    View Slide

  34. Interacting directly with
    the store
    import { createStore } from 'redux'
    const store = createStore(reducers)
    store.getState()
    store.subscribe(listener)
    store.dispatch(action)

    View Slide

  35. With React
    import { createStore } from 'redux'
    import Provider from 'react-redux'
    const store = createStore({...})
    React.render((

    {() => }

    ), mountNode);

    View Slide

  36. Other cool stuff

    View Slide

  37. Hot reloading
    • Works quite well most of the time
    • Will keep state intact

    View Slide

  38. Dev tools

    View Slide

  39. Time travel

    View Slide

  40. Redux-crud
    Building CRUD apps?
    • Standard actions creators and reducers for CRUD
    apps
    • https://github.com/Versent/redux-crud

    View Slide

  41. Thanks

    View Slide