[ngSummit] Angular meets Redux

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

Slide 3

Slide 3 text

Angular meets redux Michał Michalczuk Full-Stack Software Developer

Slide 4

Slide 4 text

The dreadful mutable state

Slide 5

Slide 5 text

The mutable state 5

Slide 6

Slide 6 text

The mutable state 6

Slide 7

Slide 7 text

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

You can use it anywhere 12 They are just libraries

Slide 13

Slide 13 text

13 Good ideas spread quickly

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

Coding Session Code show session Show me the code

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

Coding Session Code show session Show me the code

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

Cool tooling for @ngrx/store ? 28

Slide 29

Slide 29 text

Cool tooling for @ngrx/store ? 29

Slide 30

Slide 30 text

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/

Slide 31

Slide 31 text

Thanks! michalczukm [email protected] code: https://goo.gl/etE2rP also code: