[ngSummit] Angular meets Redux

[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

Bb0a01a2311e4828a7e6dc721142ce0b?s=128

Michał Michalczuk

May 27, 2017
Tweet

Transcript

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

    Software Developer
  2. 2

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

  4. The dreadful mutable state

  5. The mutable state 5

  6. The mutable state 6

  7. 7

  8. 8 … easy to use … easy to test …

    helps you to write apps that behave consistently … make you feel better ect. predictable state container
  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
  10. Redux vs Flux 10 vs Redux evolves the ideas of

    Flux, but avoids its complexity by taking cues from Elm.
  11. Nice, but it’s not only React thing? 11

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

  13. 13 Good ideas spread quickly

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

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

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

  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
  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
  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
  20. Stickers shop requirements • buy some stickers • have only

    cart in browser • count items in cart • no actuall buying 20
  21. Coding Session Code show session Show me the code

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

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

  24. Coding Session Code show session Show me the code

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

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

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

  28. Cool tooling for @ngrx/store ? 28

  29. Cool tooling for @ngrx/store ? 29

  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/
  31. Thanks! michalczukm michalczukm@gmail.com code: https://goo.gl/etE2rP also code: