One Share to Rule them All

Explanation and implementation of the upgraded share operator introduced in RxJs 7 with its extended configuration object.

GitHub Repository: https://github.com/rainerhahnekamp/rxjs7-changes-in-angular
YouTube: https://www.youtube.com/watch?v=O0g0rWi_2Yk

Transcript

1. One Share to Rule Them All Relevant Changes in RxJs 7 for Angular Applications Angular Meetup Graz, 7.9.2021 Rainer Hahnekamp https://www.youtube.com/watch?v=O0g0rWi_2Yk https://github.com/rainerhahnekamp/rxjs7-changes-in-angular
2. About Me • Rainer Hahnekamp ANGULARarchitects.io • Trainings and Consultancy • > 20 Years Experience @rainerhahnekamp https://angulararchitects.io/workshops
3. Agenda • Noteworthy Changes in RxJs 7 ◦ toPromise ◦ combineLatest() ◦ imports • Share & ShareConfig
4. toPromise // old version await of(1, 2).toPromise(); // c = 2 await of().toPromise(); // undefined // new version await firstValueFrom(of(1, 2)); // a = 1; await lastValueFrom(of(1, 2)); // b = 2; await firstValueFrom(of()); // error
5. combineLatest const letters$ = of(['a', 'b', 'c']); const numbers$ = of([1, 2, 3]); // old version combineLatest([letters$, numbers$]).subscribe(([letters, numbers]) => { console.log(letters); // ['a', 'b', 'c'] console.log(numbers); // [1, 2, 3] }); // new version combineLatest({ letters: letters$, numbers: numbers$ }).subscribe( ({ letters, numbers }) => { console.log(letters); // ['a', 'b', 'c'] console.log(numbers); // [1, 2, 3] } );
6. imports import { of, map, delay, first } from 'rxjs'; of(1).pipe( map((n) => n + 1), delay(100), first() );
8. Source Backend share() Subject
9. Source Subscriber 1 Backend Subscriber 2 Subscriber 3 share() Subject
10. Source Subscriber 1 Backend Subscriber 2 Subscriber 3 share() Subject
11. Source Subscriber 1 Backend Subscriber 2 Subscriber 3 share() Subject
12. Source Subscriber 1 Backend Subscriber 2 Subscriber 3 share() Subject Runs: 1
13. Source Subscriber 1 Backend Subscriber 2 Subscriber 3 share() Subject Runs: 1
14. Source Subscriber 1 Backend Subscriber 2 Subscriber 3 share() Subject Runs: 0
15. Source Subscriber 1 Backend Subscriber 2 Subscriber 3 share() Subject Runs: 1 A
16. Source Subscriber 1 Backend Subscriber 2 Subscriber 3 share() Subject Runs: 1 A
17. Source Subscriber 1 Backend A Subscriber 2 A Subscriber 3 share() Subject Runs: 1
18. Source Subscriber 1 Backend A Subscriber 2 A Subscriber 3 share() Subject Runs: 1
19. Source Subscriber 1 Backend A Subscriber 2 A Subscriber 3 share() Subject Runs: 1
20. Source Subscriber 1 Backend A Subscriber 2 A Subscriber 3 share() Subject Runs: 1
21. Source Subscriber 1 Backend A Subscriber 2 A Subscriber 3 share() Subject Runs: 2
22. Source Subscriber 1 Backend A Subscriber 2 A Subscriber 3 share() Subject B Runs: 2
23. Source Subscriber 1 Backend A Subscriber 2 A Subscriber 3 share() Subject B Runs: 2
24. Source Subscriber 1 Backend B A Subscriber 2 B A Subscriber 3 B share() Subject Runs: 2
25. Source Subscriber 1 Backend B A Subscriber 2 B A Subscriber 3 B share() Subject Runs: 2
26. What if... 1. a subscriber joins too late and the source is still active?
27. Source Subscriber 1 Backend Subscriber 2 Subscriber 3 share() Subject Runs: 0
28. Source Subscriber 1 Backend Subscriber 2 Subscriber 3 share() Subject ReplaySubject(1) Runs: 0
29. Source Subscriber 1 Backend Subscriber 2 Subscriber 3 share() ReplaySubject Runs: 1 A
30. Source Subscriber 1 Backend Subscriber 2 Subscriber 3 share() ReplaySubject Runs: 1 A
31. Source Subscriber 1 Backend A Subscriber 2 A Subscriber 3 share() ReplaySubject Runs: 1 A
32. Source Subscriber 1 Backend A Subscriber 2 A Subscriber 3 share() ReplaySubject Runs: 1 A
33. Source Subscriber 1 Backend A Subscriber 2 A Subscriber 3 share() ReplaySubject Runs: 1 A
34. Source Subscriber 1 Backend A Subscriber 2 A Subscriber 3 share() ReplaySubject Runs: 1 A
35. Source Subscriber 1 Backend A Subscriber 2 A Subscriber 3 share() ReplaySubject Runs: 1 A A
36. Source Subscriber 1 Backend A Subscriber 2 A Subscriber 3 share() ReplaySubject Runs: 1 A A
37. Source Subscriber 1 Backend A Subscriber 2 A Subscriber 3 share() ReplaySubject B Runs: 2 A A
38. Source Subscriber 1 Backend A Subscriber 2 A Subscriber 3 share() ReplaySubject B Runs: 2 A
39. Source Subscriber 1 Backend B A Subscriber 2 B A Subscriber 3 B share() ReplaySubject Runs: 2 A B
40. Source Subscriber 1 Backend B A Subscriber 2 B A Subscriber 3 B share() ReplaySubject Runs: 2 A B
41. What if... 1. a subscriber joins too late and the source is still active? 2. a subscriber joins too late and the source completed?
42. Source Subscriber 1 Backend Subscriber 2 Subscriber 3 share() Subject Runs: 1 A Default Behaviour on completed source
43. Source Subscriber 1 Backend Subscriber 2 Subscriber 3 share() Subject Runs: 1 A Default Behaviour on completed source
44. Source Subscriber 1 Backend A Subscriber 2 A Subscriber 3 share() Subject Runs: 1 Default Behaviour on completed source
45. Source Subscriber 1 Backend A Subscriber 2 A Subscriber 3 share() Subject Runs: 1 Default Behaviour on completed source
46. Source Subscriber 1 Backend A Subscriber 2 A Subscriber 3 share() Subject Runs: 1 Default Behaviour on completed source
47. Source Subscriber 1 Backend A Subscriber 2 A Subscriber 3 share() Subject Runs: 1 Default Behaviour on completed source
48. Source Subscriber 1 Backend Runs: 1 A Subscriber 2 A Subscriber 3 share() Subject Default Behaviour on completed source
49. Source Subscriber 1 Backend Runs: 1 A Subscriber 2 A Subscriber 3 share() Subject Default Behaviour on completed source
50. Source Subscriber 1 Backend Runs: 1 A Subscriber 2 A Subscriber 3 share() Subject Default Behaviour on completed source
51. Source Subscriber 1 Backend Runs: 1 A Subscriber 2 A Subscriber 3 share() Subject Default Behaviour on completed source
52. Source Subscriber 1 Backend Subscriber 2 Subscriber 3 share() Subject Runs: 1 A A Default Behaviour on completed source
53. Source Subscriber 1 Backend Subscriber 2 Subscriber 3 share() Subject Runs: 2 B A A Default Behaviour on completed source
54. Source Subscriber 1 Backend Subscriber 2 Subscriber 3 share() Subject Runs: 2 B A A Default Behaviour on completed source
55. Source Subscriber 1 Backend Subscriber 2 Subscriber 3 share() Subject Runs: 2 B A A Default Behaviour on completed source
57. Source Subscriber 1 Backend A Subscriber 2 A Subscriber 3 share() Subject Runs: 1 share({ resetOnComplete: false })
58. Source Subscriber 1 Backend A Subscriber 2 A Subscriber 3 share() Subject Runs: 1 share({ resetOnComplete: false })
59. Source Subscriber 1 Backend A Subscriber 2 A Subscriber 3 share() Subject Runs: 1 share({ resetOnComplete: false })
60. Source Subscriber 1 Backend A Subscriber 2 A Subscriber 3 share() Subject Runs: 1 share({ resetOnComplete: false })
61. Source Subscriber 1 Backend A Subscriber 2 A Subscriber 3 share() Subject Runs: 1 share({ resetOnComplete: false })
62. Source Subscriber 1 Backend A Subscriber 2 A Subscriber 3 share() Subject Runs: 1 share({ resetOnComplete: false })
63. Source Subscriber 1 Backend A Subscriber 2 A Subscriber 3 share() ReplaySubject Runs: 1 share({ connector: new ReplaySubject(), resetOnComplete: false }) A
64. Source Subscriber 1 Backend A Subscriber 2 A Subscriber 3 share() ReplaySubject Runs: 1 share({ connector: new ReplaySubject(), resetOnComplete: false }) A A
65. Source Subscriber 1 Backend A Subscriber 2 A Subscriber 3 share() ReplaySubject Runs: 1 share({ connector: new ReplaySubject(), resetOnComplete: false }) A A
66. What if... 1. a subscriber joins too late and the source is still active? 2. a subscriber joins too late and the source completed? 3. a subscriber joins and everyone else has unsubscribed?
67. Source Subscriber 1 Backend Subscriber 2 Subscriber 3 share() Subject Runs: 1 A Default Behaviour on unsubscribed
68. Source Subscriber 1 Backend Subscriber 2 Subscriber 3 share() Subject Runs: 1 A Default Behaviour on unsubscribed
69. Source Subscriber 1 Backend A Subscriber 2 A Subscriber 3 share() Subject Runs: 1 Default Behaviour on unsubscribed
70. Source Subscriber 1 Backend A Subscriber 2 A Subscriber 3 share() Subject Runs: 1 Default Behaviour on unsubscribed
71. Source Subscriber 1 Backend A Subscriber 2 A Subscriber 3 share() Subject Runs: 1 Default Behaviour on unsubscribed
72. Source Subscriber 1 Backend A Subscriber 2 A Subscriber 3 share() Subject Runs: 1 Default Behaviour on unsubscribed
73. Source Subscriber 1 Backend A Subscriber 2 A Subscriber 3 share() Subject Runs: 1 Default Behaviour on unsubscribed
74. Source Subscriber 1 Backend A Subscriber 2 A Subscriber 3 share() Subject Runs: 1 Default Behaviour on unsubscribed
75. Source Subscriber 1 Backend A Subscriber 2 A Subscriber 3 share() Subject Default Behaviour on unsubscribed
76. Source Subscriber 1 Backend Runs: 1 A Subscriber 2 A Subscriber 3 share() Subject Default Behaviour on unsubscribed
77. Source Subscriber 1 Backend Runs: 1 A Subscriber 2 A Subscriber 3 share() Subject Default Behaviour on unsubscribed
78. Source Subscriber 1 Backend Subscriber 2 Subscriber 3 share() Subject Runs: 1 A A Default Behaviour on unsubscribed
79. Source Subscriber 1 Backend Subscriber 2 Subscriber 3 share() Subject Runs: 2 B A A Default Behaviour on unsubscribed
80. Source Subscriber 1 Backend Subscriber 2 Subscriber 3 share() Subject Runs: 2 B A A Default Behaviour on unsubscribed
81. Source Subscriber 1 Backend Subscriber 2 Subscriber 3 share() Subject Runs: 2 B A A Default Behaviour on unsubscribed
83. Source Subscriber 1 Backend A Subscriber 2 A Subscriber 3 share() ReplaySubject Runs: 1 share({ connector: new ReplaySubject(), resetOnComplete: false, resetOnRefCountZero: false }) A
84. Source Subscriber 1 Backend A Subscriber 2 A Subscriber 3 share() ReplaySubject Runs: 1 A share({ connector: new ReplaySubject(), resetOnComplete: false, resetOnRefCountZero: false })
85. Source Subscriber 1 Backend A Subscriber 2 A Subscriber 3 share() ReplaySubject Runs: 1 A share({ connector: new ReplaySubject(), resetOnComplete: false, resetOnRefCountZero: false })
86. Source Subscriber 1 Backend Subscriber 2 Subscriber 3 share() ReplaySubject Runs: 1 A A A share({ connector: new ReplaySubject(), resetOnComplete: false, resetOnRefCountZero: false })
87. Source Subscriber 1 Backend Subscriber 2 Subscriber 3 share() ReplaySubject Runs: 1 A A A A share({ connector: new ReplaySubject(), resetOnComplete: false, resetOnRefCountZero: false })
88. Source Subscriber 1 Backend Subscriber 2 Subscriber 3 share() ReplaySubject Runs: 1 A A A A share({ connector: new ReplaySubject(), resetOnComplete: false, resetOnRefCountZero: false })
89. What if... 1. a subscriber joins too late and the source is still active? 2. a subscriber joins too late and the source completed? 3. a subscriber joins and everyone else has unsubscribed? 4. the source emits an error?
90. Summary • Try to use share for all multicasting operations • toPromise deprecated • combinateLatest with object notation • import ☹ statements changed