[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
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
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: