Angular and Redux

Managing the state of your application with the Redux pattern.
May 2018.

Transcript

1. Angular and Redux Managing the state of your application with the Redux pattern Paulo Clavijo Esteban @pclavijo Dell-EMC - May 2018
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. 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. Container Component Component-based Architecture + Redux Container Component Presentational Component @Input/@Output Presentational Component @Input/@Output Container Component Store Container 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. Store Redux data flow New State Provider Contract Tests Provider Contract Tests Reducers Actions 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. Actions { type: 'SHOW_SIDE_NAV' } { type: 'DELETE_TASK', payload: 'id-t1' } Paulo Clavijo @pclavijo - May 2018
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. 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. Http communication? Async logic?
10. Store Redux data flow New State Provider Contract Tests Provider Contract Tests Reducers Paulo Clavijo @pclavijo - May 2018 Component Selectors Provider Contract Tests Provider Contract Tests Epics Actions @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, ... } Actions
11. Store Redux data flow New State Provider 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, ... } Service New State { ... isDeleting: true, ... } isDeleting: true, Actions
12. Store Redux data flow New State Provider 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
13. Developer Tools, Time Travel Paulo Clavijo @pclavijo - May 2018
14. Observables / Rx data streams React RxJS … p o r n it y h o s a s am Paulo Clavijo @pclavijo - May 2018
15. Redux libraries for Angular • Angular Redux (github.com/angular-redux) • Ngrx (github.com/ngrx) Paulo Clavijo @pclavijo - May 2018
16. Terminology - Action - Action Creators - Reducer - Root Reducer (combine reducers) - Store - Application State - Epic (Effects) - Middleware Paulo Clavijo @pclavijo - May 2018
17. Demo