Redux: Flux Reduced

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