Angular and Redux
5 likes2,317 views
Managing the state of your application with the Redux pattern. Introduction to the Redux pattern for Angular applications. May 2018
![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](https://image.slidesharecdn.com/angularreduxintroduction-pauloclavijo-may-2018-180504115651/85/Angular-and-Redux-8-320.jpg)
![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](https://image.slidesharecdn.com/angularreduxintroduction-pauloclavijo-may-2018-180504115651/85/Angular-and-Redux-10-320.jpg)
Ad
More Related Content
What's hot (20)
Similar to Angular and Redux (20)
Ad
More from Paulo Clavijo (15)
Ad
Recently uploaded (20)
Angular and Redux
- 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 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. 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. 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 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. Developer Tools, Time Travel Paulo Clavijo @pclavijo - May 2018
- 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. Redux libraries for Angular ● Angular Redux (github.com/angular-redux) ● Ngrx (github.com/ngrx) Paulo Clavijo @pclavijo - May 2018
- 14. Terminology - Action - Action Creators - Reducer - Root Reducer (combine reducers) - Store - Application State - Epic (Effects) - Middleware Paulo Clavijo @pclavijo - May 2018
- 15. Demo