Managing the state of your application with the Redux pattern. Introduction to the Redux pattern for Angular applications. May 2018

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