Level up your NgRx game

Tips and tricks on angular / NgRx best practices. ngrx provides a set of clean, well-tested libraries for reactive programming in Angular applications.

Transcript

1. L E V E L U P Y O U R N G R X G A M E Ö N D E R C E Y L A N
2. P L AT F O R M • @ngrx/store • @ngrx/effects • @ngrx/router-store • @ngrx/store-devtools • @ngrx/entity • @ngrx/schematics
3. 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
4. Good Action Hygiene with NgRx @ng-conf - Mike Ryan
5. 3 P I T FA L L S O F W R I T I N G G O O D A C T I O N S
6. P I T FA L L 1 
 R E U S I N G A C T I O N S
7. P I T FA L L 1 
 R E U S I N G A C T I O N S
8. P I T FA L L 1 
 R E U S I N G A C T I O N S
9. P I T FA L L 1 
 R E U S I N G A C T I O N S
10. P I T FA L L 2 
 G E N E R I C A C T I O N T Y P E S
11. P I T FA L L 2 
 G E N E R I C A C T I O N T Y P E S
12. P I T FA L L 2 
 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
13. [Source] Event
14. P I T FA L L 3 
 A C T I O N S U B T Y P I N G
15. P I T FA L L 3 
 A C T I O N S U B T Y P I N G
16. P I T FA L L 3 
 A C T I O N S U B T Y P I N G
17. P I T FA L L 3 
 A C T I O N S U B T Y P I N G
18. P I T FA L L 3 
 A C T I O N S U B T Y P I N G
19. Avoid nested conditionals in reducers and effects, keep you action types narrow Good Action Hygiene with NgRx @ng-conf - Mike Ryan
20. G O O D A C T I O N H Y G I E N E [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
21. U S E S C H E M AT I C S
22. B O I L E R P L AT E
23. D E FA U LT C O L L E C T I O N
24. S T Y L E G U I D E
25. S T Y L E G U I D E
26. 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
30. E N T I T Y S TAT E
31. E N T I T Y A D A P T E R
32. C O L L E C T I O N M E T H O D S
33. D E FA U LT S E L E C T O R S
34. N G R X - D ATA
35. U S E S E L E C T O R S S E R I O S LY
37. D RY
38. M E M O I Z AT I O N
39. S TAT E S L I C E
40. C O M P O S I N G S E L E C T O R S
41. C O M P O S I N G S E L E C T O R S
42. K E E P Y O U R S T O R E C L E A N
43. W H AT B E L O N G S I N S T O R E ?
44. S H A R I Reducing the Boilerplate with NgRx @ng-conf - Brandon Roberts & Mike Ryan
45. S H A R I S H A R E D Shared state is accessed by many components and services Reducing the Boilerplate with NgRx @ng-conf - Brandon Roberts & Mike Ryan
46. S H A R I H Y D R AT E D State that is persisted and hydrated from storage Reducing the Boilerplate with NgRx @ng-conf - Brandon Roberts & Mike Ryan
47. S H A R I AVA I L A B L E State that needs to be available when re-entering routes Reducing the Boilerplate with NgRx @ng-conf - Brandon Roberts & Mike Ryan
48. S H A R I R E T R I E V E D State that needs to be retrieved with a side effect Reducing the Boilerplate with NgRx @ng-conf - Brandon Roberts & Mike Ryan
49. S H A R I I M PA C T E D State that is impacted by actions from other sources Reducing the Boilerplate with NgRx @ng-conf - Brandon Roberts & Mike Ryan
50. S E R I A L I Z AT I O N 
 & H Y D R AT I O N
51. S E R I A L I S AT I O N
52. C L I E N T S T O R A G E & H Y D R AT I O N
53. C L I E N T S T O R A G E & H Y D R AT I O N
54. A D J U S T V I E W S
55. N G I F & A S Y N C
56. C H A N G E D E T E C T I O N
57. L O O K I N G A H E A D
58. N G R X 7 B A C K L O G
59. Q U I Z T I M E
60. menti.com 21 08 65
61. T H A N K Y O U ! Follow me on @ O N D E R C E Y L A N