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 !