State management can get really complex for scaled Angular applications. And, NgRx can be an answer for the complexity of this problem. This talk will cover some of the best practices of building an NgRx Angular app. We'll go through building a good action hygiene, efficiently using schematics, improving your apps performance with one-way data binding and memoized selectors, reducing the boilerplate with entities/schematics and introducing ngrx-data. After this session, you'll have more control on the NgRx platform with the grasp of entities, memoized selectors, effects and schematics.

1. L E V E L U P Y O U R
N G R X G A M E

2. @onderceylan
Sharing knowledge on #javascript, #typescript, #angular, #ionic and #pwa
JS Tech Lead @LINKIT, @KLM
Speaker, co-organiser @ITNEXT, @GDG-NL
Ö N D E R C E Y L A N

3. @onderceylan
N G R X P L AT F O R M
• @ngrx/store
• @ngrx/effects
• @ngrx/router-store
• @ngrx/store-devtools
• @ngrx/entity
• @ngrx/data
• @ngrx/schematics

4. @onderceylan
M A I N TA I N A G O O D
A C T I O N H Y G I E N E

5. @onderceylan
[Source] Event

6. @onderceylan Good Action Hygiene with NgRx @ng-conf - Mike Ryan

7. @onderceylan
AV O I D G E N E R I C A C T I O N T Y P E S
@ngrx/store/init
[User] Authenticate
[User] Authenticate Success
[WontonSoup] Add One
[WontonSoup] Add One
[Cart] Checkout
[Cart] Checkout Success
@ngrx/store/init
[Login Page] Login
[Auth API] Login Success
[Menu Page] Add Wonton Soup
[Soup Details Page] Add Wonton Soup
[Cart Dropdown] Checkout
[Cart API] Checkout Success
Good Action Hygiene with NgRx @ng-conf - Mike Ryan

8. @onderceylan
AV O I D G E N E R I C A C T I O N T Y P E S
[Login Page] Login
[Menu Page] Add Wonton
[Menu Page] Add Teriyaki
[Menu Page] Add Noodle
[Cart] Checkout
[Auth API] Login Success
[Auth API] Login Failure
[Cart API] Checkout Success
[Cart API] Checkout Failure
[WS API] Update Availability
[WebSocket] Open
[WebSocket] Disconnected
[IndexDB] Save Success
Good Action Hygiene with NgRx @ng-conf - Mike Ryan

9. @onderceylan
U S E N G R X
S C H E M AT I C S

10. @onderceylan
B O I L E R P L AT E

11. @onderceylan
D E FA U LT C O L L E C T I O N

12. @onderceylan
S T Y L E G U I D E

13. @onderceylan
S T Y L E G U I D E

14. @onderceylan
U S E S E L E C T O R S

15. @onderceylan
D RY

16. @onderceylan
M E M O I Z AT I O N

17. @onderceylan
– N G R X D O C S
“Because selectors are pure functions, the last result can be returned when the
arguments match without re-invoking your selector function. This can provide
performance benefits, particularly with selectors that perform expensive
computation. This practice is known as memoization.”

18. @onderceylan
T Y P E S A F E T Y

19. @onderceylan

20. @onderceylan
S TAT E S L I C E

21. @onderceylan
C O M P O S I N G S E L E C T O R S

22. @onderceylan
S E L E C T O R TA K E A WAY S
• Don’t pollute the store state with derived state, use
state selectors to create view models
• Keep selectors small so they can be used to compose
bigger and more complex selectors
• Take advantage of memoization by using selectors and
customMemoize / resultMemoize when needed

23. @onderceylan
S E R I A L I Z AT I O N & H Y D R AT I O N

24. @onderceylan
S E R I A L I S AT I O N

25. @onderceylan
R U N T I M E C H E C K S

26. @onderceylan
C L I E N T S T O R A G E & H Y D R AT I O N

27. @onderceylan
C L I E N T S T O R A G E & H Y D R AT I O N

28. @onderceylan
A D J U S T V I E W S

29. @onderceylan
N G I F & A S Y N C

30. @onderceylan
C H A N G E D E T E C T I O N

31. @onderceylan
S I M P L I F Y Y O U R
R E D U C E R S

32. @onderceylan

33. @onderceylan
I M M E R

34. @onderceylan
I M M E R
https://blog.angularindepth.com/clean-ngrx-reducers-using-immer-7fe4a0d43508

35. @onderceylan
S I M P L I F Y Y O U R R E D U C E R S
W I T H @ N G R X / E N T I T Y

36. @onderceylan

37. @onderceylan
E N T I T Y S TAT E

38. @onderceylan
E N T I T Y A D A P T E R

39. @onderceylan
C O L L E C T I O N M E T H O D S

40. @onderceylan
D E FA U LT S E L E C T O R S

41. @onderceylan
Y O U M AY N E V E R FA C E B O I L E R P L AT E
I S S U E W @ N G R X / D ATA

42. @onderceylan
@ N G R X / D ATA

43. @onderceylan
W H AT C A N G O W R O N G
W I T H C O D E G E N E R AT I O N ?

44. @onderceylan
@ N G R X / D ATA
• A single objective: to simplify management of entity
data
• Abstraction of reducers, actions, effects, selectors and
HTTP data services
• Almost anything is customizable at a single entity-type
level
• NgRx Data library is good for querying, caching, and
saving entity data

45. @onderceylan
O P T I M I S T I C U P D AT E S

46. @onderceylan
O P T I M I S T I C U P D AT E S W I T H @ N G R X / D ATA

47. @onderceylan
O P T I M I S T I C U P D AT E S W I T H N X

48. @onderceylan
L O O K I N G A H E A D

49. @onderceylan
FA C A D E S

50. @onderceylan
FA C A D E S

51. @onderceylan
A C T I O N C R E AT O R S

52. @onderceylan
A C T I O N C R E AT O R S

53. @onderceylan
R E D U C E R C R E AT O R S

54. @onderceylan
E F F E C T C R E AT O R S

55. @onderceylan
M A I N TA K E A WAY S
• Maintain a good action hygiene
• Use @ngrx/schematics
• Use selectors
• Attention on serialisation & hydration
• Manage your data with @ngrx/entity or @ngrx/data
• Adjust your views with async pipe and ChangeDetectionStrategy.OnPush
• Use optimistic updates when needed
• Use facades where needed and start using creators to reduce boilerplate

56. @onderceylan
R E S O U R C E S
• https://ngrx.io
• https://github.com/ngrx/platform/tree/master/projects/example-
app
• https://github.com/nrwl/nx/blob/master/packages/angular/src/
runtime/nx/data-persistence.ts
• https://medium.com/ngrx/
• https://blog.angularindepth.com/tagged/ngrx
• https://blog.nrwl.io/search?q=ngrx

57. Follow me on
@ O N D E R C E Y L A N
T H A N K Y O U !