The document discusses best practices for using NgRx in Angular applications, emphasizing the importance of maintaining good action hygiene, utilizing selectors, and managing state efficiently with NgRx entity and data. It highlights strategies for serialization, hydration, and using memoization for performance optimization, as well as the benefits of optimistic updates and facades. Additionally, the document provides resources for further learning about NgRx development.

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 !