[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. 2.

    2

  2. 7.

    7

  3. 8.

    8 … easy to use … easy to test …

    helps you to write apps that behave consistently … make you feel better ect. predictable state container
  4. 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
  5. 10.

    Redux vs Flux 10 vs Redux evolves the ideas of

    Flux, but avoids its complexity by taking cues from Elm.
  6. 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
  7. 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
  8. 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
  9. 20.

    Stickers shop requirements • buy some stickers • have only

    cart in browser • count items in cart • no actuall buying 20
  10. 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/