Things we have to manage in out
apps
• Data that comes from the server and whether it's pending or
resulted in an error
• UI state like toggles, alerts and errors messages
• User input, filters and search queries
• Other
Slide 4
Slide 4 text
Component - Service
Slide 5
Slide 5 text
But our apps grow
Slide 6
Slide 6 text
Components - Service
Slide 7
Slide 7 text
What changed?
Slide 8
Slide 8 text
Flux
• Flux is an architecture for creating data layers in JavaScript
applications.
• It places a focus on creating explicit and understandable
update paths for your application's data
• Helps tracing changes during development and makes bugs
easier to track down and fix
Slide 9
Slide 9 text
Flux
Slide 10
Slide 10 text
Redux
• Predictable state management
• Architecture that keeps the core principles of Flux by having
unidirectional data flow
• Redux applications have only one global, read-only
application state
• This state is calculated by "reducing" over a collection or stream
of actions that update it in controlled ways
Slide 11
Slide 11 text
Redux Constraints
• Single State Tree
• Actions describe updates
• Reducer apply updates
Slide 12
Slide 12 text
Redux Contracts
• Reducers - Specification of how the state updates
• High Order Reducers - Functions that take reducer as argument,
take some additional arguments and return another reducer.
• Selectors - Takes the whole states and returns a derived state
Slide 13
Slide 13 text
Redux
in Angular
Single responsibility?
Slide 14
Slide 14 text
Redux
in Angular
Slide 15
Slide 15 text
@ngrx
Slide 16
Slide 16 text
@ngrx/store
• Implementation of Redux for NG
• It uses RxJS Observables
Slide 17
Slide 17 text
@ngrx/effects
• Side effect model for @ngrx/store
Slide 18
Slide 18 text
@ngrx/router-store
• Bindings to connect angular/router to ngrx/store
Slide 19
Slide 19 text
@ngrx/store &
@ngrx/effects
Slide 20
Slide 20 text
Pros and cons using ngrx
1. Unidirectional data flow
2. Really helpful dev-tools (time travel)
3. Good code separation
4. Fast bug fixing due to 1, 2 and 3
5. Easier testing and reasoning due to pure functions and composition
6. Better angular performance with OnPush Strategy
7. More files and code
Slide 21
Slide 21 text
https://github.com/ngrx/store
Slide 22
Slide 22 text
Example
Slide 23
Slide 23 text
Install packages
Slide 24
Slide 24 text
Install devtools
Slide 25
Slide 25 text
Define store actions
app/store/app.actions.ts
Slide 26
Slide 26 text
Define state structure
app/store/app.reducer.ts
Slide 27
Slide 27 text
Define state
changes
app/store/app.reducer.ts
Slide 28
Slide 28 text
Create the reducer function
app/store/app.reducer.ts
Slide 29
Slide 29 text
Import store and devtools
app/store/app.module.ts
Slide 30
Slide 30 text
Create the app model
app/store/app.module.ts
Slide 31
Slide 31 text
Use the app model
app/todo-list/todo-list.component.ts
Slide 32
Slide 32 text
Use the app model
app/todo-list/todo-list.component.html