This document provides an introduction to NgRx, a library for managing application state in Angular applications using the Redux pattern. It discusses NgRx goals like organizing and managing state, communicating changes, and performance benefits. It also covers Redux principles like single source of truth, pure functions for state changes, and read-only state. The document demonstrates the basic NgRx pattern of actions, reducers, selectors, and effects. It provides examples of setting up NgRx in an Angular application and key NgRx concepts like actions, reducers, selectors, effects, immutable data, and smart/dumb components.

1. NgRx Getting Started

2. Gustavo Costa
Javascript, Angular, AngularJS, RxJS, Reactive
Programming, Performance, GDG Organizer
twitter.com/GustavoCostaW
Translucent - CA
linkedin.com/in/GustavoCostaW

3. State
State
View State
Entity Data
User Information

4. NgRx
= + +

5. Redux goals
Organizing state1
Managing state2
Communicate changes3

6. Why Redux?
Communicate changes1
Cache Strategy2
Pure components3
Debugging4
Performance, OnPush5
Component communication6

7. Maybe you do not need it
Your application is simple1
Your team is new to Angular2
Your team has a good state management pattern3

8. Redux Principles
Redux
Single source
of truth
Changes ONLY
by pure functions
(reducers)
State is read
ONLY and changed
ONLY by actions

9. Component Action
Reducer
Selector
Store (State)
View
Redux Pattern
ADD_PRODUCT
(click)=“addProduct(product)”
Get the current State
Set new State
Component notified
Updates the view

10. Action
Reducer
Store (State)
Component
Selector
View
Redux Pattern

11. Actions

12. Reducer

13. Store (State)

14. Let’s start - https://ngrx.io
npm install @ngrx/store --save1
StoreModule.forRoot(reducer);2
StoreModule.forFeature(‘featureName’, reducer);3

15. StoreModule.forRoot(reducer);

16. StoreModule.forFeature(reducer);
forRoot(reducer)
forFeature(‘products’, reducer)
forFeature(‘cart’, reducer)
forFeature(‘orders’, reducer)
forFeature(‘customers’, reducer)

17. DevTools

18. Let’s the demo.

19. Immutable vs Mutable = Array Methods
[].push(…) =1
[].concat(…) =2
[].filter(…) =3
[].map(…) =5
[].forEach() =6
[…[], newItem] =7
[].shift(…) =4 [].splice(…) =8
MUTABLE
IMMUTABLE
IMMUTABLE
MUTABLE
IMMUTABLE
MUTABLE
IMMUTABLE
MUTABLE

20. Smart and Dumb Comp

21. HTTP?

22. Component Action
Reducer
Selector
Store (State)
View
Redux Pattern + Effects
listening… ADD_PRODUCT
(click)=“addProduct(product)”
Get the current State
Calls GET
Component notified
Updates the view
@Effects
Service (Ajax)
ADD_PRODUCT
Set new State
Returns from
Server
ADD_PRODUCT_SUCCESS

23. @Effects

24. Flattening Strategies
switchMap -
1 Cancels the current subscription/request and can cause race condition
* Use for get requests or cancelable requests like searches
concatMap -
2 Runs subscriptions/requests in order and is less performant
* Use for get, post and put requests when order is important
mergeMap -
3 Runs subscriptions/requests in parallel
* Use for put, post and delete methods when order is not important
exhaustMap -
4 Ignores all subsequent subscriptions/requests until it completes
* Use for login when you do not want more requests until the initial one is complete

25. @Effects
npm install @ngrx/effects --save1
EffectsModule.forRoot(reducer);2
EffectsModule.forFeature(‘featureName’, reducer);3

26. Keep learning.
Typing1
Selectors2
Schematics3

27. Typing

28. Typing

29. Typing

30. Typing

31. Typescript ❤

32. Typescript ❤

33. Selectors
Provide a strongly typed API1
Reusable2
Memoized (cached)3
Encapsulate complex data transformations4

34. Schematics
Setup1
Store2
Effect3

35. https://app.pluralsight.com/library/courses/
angular-ngrx-getting-started/table-of-contents
https://ngrx.io
https://angular.io
References

36. https://github.com/GustavoCostaW/ngrx-
getting-started
Project Sample

37.
twitter/GustavoCostaW
linkedin/GustavoCostaW
instagram/GustavoCostaW
facebook/GustavoCostaW
❤