[ngSummit] Angular meets Redux

Dealing with the state in Angular applications can be tough, will Redux help us dealing with it? Lets see Angular with ngrx/store based solution.

code: https://github.com/michalczukm/ngsummit_angular-meets-redux
ngSummit 2017 conference; Wrocław, Poland

Transcript

1. Angular meets redux
   grab the code: https://github.com/michalczukm/ngsummit_angular-meets-redux
   Michał Michalczuk
   Full-Stack Software Developer
   

   View Slide

2. View Slide

3. Angular meets redux
   Michał Michalczuk
   Full-Stack Software Developer
   

   View Slide

4. The dreadful mutable state
   

   View Slide

5. The mutable state
   5
   

   View Slide

6. The mutable state
   6
   

   View Slide

7. View Slide

8. 8
   … easy to use
   … easy to test
   … helps you to write apps that behave
   consistently
   … make you feel better
   ect.
   predictable state container
   

   View Slide

9. 9
   … easy to use
   … easy to test
   … helps you to write apps that behave
   consistently
   … make you feel better
   ect.
   predictable state container
   concrete library
   

   View Slide

10. Redux vs Flux
    10
    vs
    Redux evolves the ideas of Flux, but avoids its complexity
    by taking cues from Elm.
    

    View Slide

11. Nice, but it’s not only React thing?
    11
    

    View Slide

12. You can use it anywhere
    12
    They are just libraries
    

    View Slide

13. 13
    Good ideas spread quickly
    

    View Slide

14. ● @ngrx/store
    ●
    14
    Redux inspired solutions for Angular
    

    View Slide

15. redux - as pattern
    15
    http://slides.com/jenyaterpil/redux-from-twitter-hype-to-production
    

    View Slide

16. redux - as pattern
    16
    http://slides.com/jenyaterpil/redux-from-twitter-hype-to-production
    

    View Slide

17. The state of your whole application is stored in an object tree within a single store.
    {
    todos: [
    {
    text: 'Keep all state in a single tree',
    completed: false
    }
    ]
    }
    3 rules of redux 1 - single source of truth
    17
    

    View Slide

18. The only way to change the state is to emit an action, an object describing what happened.
    store.dispatch({
    type: 'ADD_TODO',
    text: 'Get it done!'
    })
    3 rules of redux 2 - state is read-only
    18
    

    View Slide

19. To specify how the state tree is transformed by actions, you write pure reducers.
    function todos(state = [], action) {
    switch (action.type) {
    case 'ADD_TODO':
    return [
    ...state, { text: action.text, completed: false }
    ]
    default:
    return state
    }
    }
    3 rules of redux 3 - changes are made by pure functions
    19
    

    View Slide

20. Stickers shop
    requirements
    ● buy some stickers
    ● have only cart in
    browser
    ● count items in cart
    ● no actuall buying
    20
    

    View Slide

21. Coding Session
    Code show session
    Show me the code
    

    View Slide

22. Yeah … but
    What about API?
    What about HTTP requests?
    22
    

    View Slide

23. Komunikacja z API
    23
    http://slides.com/jenyaterpil/redux-from-twitter-hype-to-production
    

    View Slide

24. Coding Session
    Code show session
    Show me the code
    

    View Slide

25. Can we scale it?
    25
    http://slides.com/jenyaterpil/redux-from-twitter-hype-to-production
    

    View Slide

26. Scaling
    26
    http://slides.com/jenyaterpil/redux-from-twitter-hype-to-production
    

    View Slide

27. Scaled
    27
    http://slides.com/jenyaterpil/redux-from-twitter-hype-to-production
    

    View Slide

28. Cool tooling for @ngrx/store ?
    28
    

    View Slide

29. Cool tooling for @ngrx/store ?
    29
    

    View Slide

30. Few links
    30
    my code: https://github.com/michalczukm/ngsummit_angular-meets-redux
    redux:
    ● http://slides.com/jenyaterpil/redux-from-twitter-hype-to-production
    ● http://redux.js.org/docs/introduction/ThreePrinciples.html
    ● redux + rxjs + react: http://rudiyardley.com/redux-single-line-of-code-rxjs/
    ● jquery + Redux: https://codepen.io/mdd/pen/wGRqbw/?editors=1010
    ● http://www.sohamkamani.com/blog/2016/06/05/redux-apis/
    angular and stores:
    ● http://blog.angular-university.io/angular-2-redux-ngrx-rxjs/
    ngrx/store:
    ● https://github.com/ngrx/example-app
    ● http://onehungrymind.com/build-better-angular-2-application-redux-ngrx/
    

    View Slide

31. Thanks!
    michalczukm
    michalczukm@gmail.com
    code:
    https://goo.gl/etE2rP
    also code:
    

    View Slide