Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Angular and Redux

1,203 views

Published on

Managing the state of your application with the Redux pattern.

Introduction to the Redux pattern for Angular applications.
May 2018

Published in: Technology
  • Be the first to comment

Angular and Redux

  1. 1. Angular and Redux Managing the state of your application with the Redux pattern Paulo Clavijo Esteban @pclavijo Dell-EMC - May 2018
  2. 2. From AngularJS to Angular - MVC Architecture - Controllers - Scope horrors - Two-way binding - Directives for each event - Wrappers for libraries - Component-Based Architecture - Components - @Inputs and @Outputs - TypeScript - Reactive with Observables RxJS - CLI - MVC Architecture - Controllers - Scope horrors - Two-way binding - Directives for each event - Wrappers for libraries Paulo Clavijo @pclavijo - May 2018
  3. 3. Container Component Component-based Architecture Container Component Presentational Component @Input/@Output Presentational Component @Input/@Output Container Component Service Service Service Service Service Container Component Presentational Component @Input/@Output Presentational Component @Input/@Output Service Paulo Clavijo @pclavijo - May 2018
  4. 4. Container Component Component-based Architecture + Redux Container Component Presentational Component @Input/@Output Presentational Component @Input/@Output Container Component StoreContainer Component Presentational Component @Input/@Output Presentational Component @Input/@Output ke l he l a n Sta on g e l Paulo Clavijo @pclavijo - May 2018
  5. 5. Store Redux data flow New State Provider Contract Tests Provider Contract Tests ReducersActions Paulo Clavijo @pclavijo - May 2018 Component 1) co n di t s ac 2) re r a c e n t e Selectors 3) s o p es d a
  6. 6. Actions { type: 'SHOW_SIDE_NAV' } { type: 'DELETE_TASK', payload: 'id-t1' } Paulo Clavijo @pclavijo - May 2018
  7. 7. Reducers homepageReducer(state, action) { switch (action.type) { case 'SHOW_SIDE_NAV': return { ...state, showSideNav: true }; case 'HIDE_SIDE_NAV': return { ...state, showSideNav: false }; default: return state; } Paulo Clavijo @pclavijo - May 2018
  8. 8. State Paulo Clavijo @pclavijo - May 2018 { header: { user: { id: 'id-u1', name: 'John Doe' }, notifications: [ ] }, tasksBoard: { tasks: [ { id: 'id-t1', name: 'Buy bread', done: false }, { id: 'id-t2', name: 'Go to the gym', done: false } ], isLoading: false }, sideNav: { show: false } } Mod g o p ic o s a n i t if n e be n u n an p mo s
  9. 9. Http communication? Async logic?
  10. 10. Store Redux data flow New StateProvider Contract Tests Provider Contract Tests Reducers Paulo Clavijo @pclavijo - May 2018 Component Selectors Provider Contract Tests Provider Contract Tests Epics Actions Action { type: 'DELETE_ORDER', payload: { orderId: 'id-1' } @select('orders') Store State { orders:[ { orderId: 'o1' lineItems: [ { id: 'i1', name: 'foo', qty: 1 }, { id: 'i2', name: 'bar', qty: 2 } ], total: 1000 }], showOrderDetails: true, isDeleting: false, ... } Action Action { type: 'DELETE_ORDER_SUCCEEDED' } Service New State { ... isDeleting: true, ... } isDeleting: true, New State { ... showOrderDetails: false, isDeleting: false, ... } Store State { orders:[ { orderId: 'o1' lineItems: [ { id: 'i1', name: 'foo', qty: 1 }, { id: 'i2', name: 'bar', qty: 2 } ], total: 1000 }], showOrderDetails: false, isDeleting: false, ... } Actions
  11. 11. Developer Tools, Time Travel Paulo Clavijo @pclavijo - May 2018
  12. 12. Observables / Rx data streams React RxJS … p o r n it y h o s a s am Paulo Clavijo @pclavijo - May 2018
  13. 13. Redux libraries for Angular ● Angular Redux (github.com/angular-redux) ● Ngrx (github.com/ngrx) Paulo Clavijo @pclavijo - May 2018
  14. 14. Terminology - Action - Action Creators - Reducer - Root Reducer (combine reducers) - Store - Application State - Epic (Effects) - Middleware Paulo Clavijo @pclavijo - May 2018
  15. 15. Demo

×