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
   

   View Slide

2. About Me
   ● Rainer Hahnekamp
   ANGULARarchitects.io
   ● Trainings and Consultancy
   ● > 20 Years Experience
   @rainerhahnekamp
   https://angulararchitects.io/workshops
   

   View Slide

3. Agenda
   ● Noteworthy Changes in RxJs 7
   ○ toPromise
   ○ combineLatest()
   ○ imports
   ● Share & ShareConfig
   

   View Slide

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
   

   View Slide

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]
   }
   );
   

   View Slide

6. imports
   import { of, map, delay, first } from 'rxjs';
   of(1).pipe(
   map((n) => n + 1),
   delay(100),
   first()
   );
   

   View Slide

7. View Slide

8. Source
   Backend
   share()
   Subject
   

   View Slide

9. Source
   Subscriber 1
   Backend
   Subscriber 2
   Subscriber 3
   share()
   Subject
   

   View Slide

10. Source
    Subscriber 1
    Backend
    Subscriber 2
    Subscriber 3
    share()
    Subject
    

    View Slide

11. Source
    Subscriber 1
    Backend
    Subscriber 2
    Subscriber 3
    share()
    Subject
    

    View Slide

12. Source
    Subscriber 1
    Backend
    Subscriber 2
    Subscriber 3
    share()
    Subject
    Runs: 1
    

    View Slide

13. Source
    Subscriber 1
    Backend
    Subscriber 2
    Subscriber 3
    share()
    Subject
    Runs: 1
    

    View Slide

14. Source
    Subscriber 1
    Backend
    Subscriber 2
    Subscriber 3
    share()
    Subject
    Runs: 0
    

    View Slide

15. Source
    Subscriber 1
    Backend
    Subscriber 2
    Subscriber 3
    share()
    Subject
    Runs: 1
    A
    

    View Slide

16. Source
    Subscriber 1
    Backend
    Subscriber 2
    Subscriber 3
    share()
    Subject
    Runs: 1
    A
    

    View Slide

17. Source
    Subscriber 1
    Backend
    A
    Subscriber 2
    A
    Subscriber 3
    share()
    Subject
    Runs: 1
    

    View Slide

18. Source
    Subscriber 1
    Backend
    A
    Subscriber 2
    A
    Subscriber 3
    share()
    Subject
    Runs: 1
    

    View Slide

19. Source
    Subscriber 1
    Backend
    A
    Subscriber 2
    A
    Subscriber 3
    share()
    Subject
    Runs: 1
    

    View Slide

20. Source
    Subscriber 1
    Backend
    A
    Subscriber 2
    A
    Subscriber 3
    share()
    Subject
    Runs: 1
    

    View Slide

21. Source
    Subscriber 1
    Backend
    A
    Subscriber 2
    A
    Subscriber 3
    share()
    Subject
    Runs: 2
    

    View Slide

22. Source
    Subscriber 1
    Backend
    A
    Subscriber 2
    A
    Subscriber 3
    share()
    Subject
    B
    Runs: 2
    

    View Slide

23. Source
    Subscriber 1
    Backend
    A
    Subscriber 2
    A
    Subscriber 3
    share()
    Subject
    B
    Runs: 2
    

    View Slide

24. Source
    Subscriber 1
    Backend
    B
    A
    Subscriber 2
    B
    A
    Subscriber 3
    B
    share()
    Subject
    Runs: 2
    

    View Slide

25. Source
    Subscriber 1
    Backend
    B
    A
    Subscriber 2
    B
    A
    Subscriber 3
    B
    share()
    Subject
    Runs: 2
    

    View Slide

26. What if...
    1. a subscriber joins too late and the source is still active?
    

    View Slide

27. Source
    Subscriber 1
    Backend
    Subscriber 2
    Subscriber 3
    share()
    Subject
    Runs: 0
    

    View Slide

28. Source
    Subscriber 1
    Backend
    Subscriber 2
    Subscriber 3
    share()
    Subject
    ReplaySubject(1)
    Runs: 0
    

    View Slide

29. Source
    Subscriber 1
    Backend
    Subscriber 2
    Subscriber 3
    share()
    ReplaySubject
    Runs: 1
    A
    

    View Slide

30. Source
    Subscriber 1
    Backend
    Subscriber 2
    Subscriber 3
    share()
    ReplaySubject
    Runs: 1
    A
    

    View Slide

31. Source
    Subscriber 1
    Backend
    A
    Subscriber 2
    A
    Subscriber 3
    share()
    ReplaySubject
    Runs: 1
    A
    

    View Slide

32. Source
    Subscriber 1
    Backend
    A
    Subscriber 2
    A
    Subscriber 3
    share()
    ReplaySubject
    Runs: 1
    A
    

    View Slide

33. Source
    Subscriber 1
    Backend
    A
    Subscriber 2
    A
    Subscriber 3
    share()
    ReplaySubject
    Runs: 1
    A
    

    View Slide

34. Source
    Subscriber 1
    Backend
    A
    Subscriber 2
    A
    Subscriber 3
    share()
    ReplaySubject
    Runs: 1
    A
    

    View Slide

35. Source
    Subscriber 1
    Backend
    A
    Subscriber 2
    A
    Subscriber 3
    share()
    ReplaySubject
    Runs: 1
    A
    A
    

    View Slide

36. Source
    Subscriber 1
    Backend
    A
    Subscriber 2
    A
    Subscriber 3
    share()
    ReplaySubject
    Runs: 1
    A
    A
    

    View Slide

37. Source
    Subscriber 1
    Backend
    A
    Subscriber 2
    A
    Subscriber 3
    share()
    ReplaySubject
    B
    Runs: 2
    A
    A
    

    View Slide

38. Source
    Subscriber 1
    Backend
    A
    Subscriber 2
    A
    Subscriber 3
    share()
    ReplaySubject
    B
    Runs: 2
    A
    

    View Slide

39. Source
    Subscriber 1
    Backend
    B
    A
    Subscriber 2
    B
    A
    Subscriber 3
    B
    share()
    ReplaySubject
    Runs: 2
    A
    B
    

    View Slide

40. Source
    Subscriber 1
    Backend
    B
    A
    Subscriber 2
    B
    A
    Subscriber 3
    B
    share()
    ReplaySubject
    Runs: 2
    A
    B
    

    View Slide

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?
    

    View Slide

42. Source
    Subscriber 1
    Backend
    Subscriber 2
    Subscriber 3
    share()
    Subject
    Runs: 1
    A
    Default Behaviour on completed source
    

    View Slide

43. Source
    Subscriber 1
    Backend
    Subscriber 2
    Subscriber 3
    share()
    Subject
    Runs: 1
    A
    Default Behaviour on completed source
    

    View Slide

44. Source
    Subscriber 1
    Backend
    A
    Subscriber 2
    A
    Subscriber 3
    share()
    Subject
    Runs: 1
    Default Behaviour on completed source
    

    View Slide

45. Source
    Subscriber 1
    Backend
    A
    Subscriber 2
    A
    Subscriber 3
    share()
    Subject
    Runs: 1
    Default Behaviour on completed source
    

    View Slide

46. Source
    Subscriber 1
    Backend
    A
    Subscriber 2
    A
    Subscriber 3
    share()
    Subject
    Runs: 1
    Default Behaviour on completed source
    

    View Slide

47. Source
    Subscriber 1
    Backend
    A
    Subscriber 2
    A
    Subscriber 3
    share()
    Subject
    Runs: 1
    Default Behaviour on completed source
    

    View Slide

48. Source
    Subscriber 1
    Backend
    Runs: 1
    A
    Subscriber 2
    A
    Subscriber 3
    share()
    Subject
    Default Behaviour on completed source
    

    View Slide

49. Source
    Subscriber 1
    Backend
    Runs: 1
    A
    Subscriber 2
    A
    Subscriber 3
    share()
    Subject
    Default Behaviour on completed source
    

    View Slide

50. Source
    Subscriber 1
    Backend
    Runs: 1
    A
    Subscriber 2
    A
    Subscriber 3
    share()
    Subject
    Default Behaviour on completed source
    

    View Slide

51. Source
    Subscriber 1
    Backend
    Runs: 1
    A
    Subscriber 2
    A
    Subscriber 3
    share()
    Subject
    Default Behaviour on completed source
    

    View Slide

52. Source
    Subscriber 1
    Backend
    Subscriber 2
    Subscriber 3
    share()
    Subject
    Runs: 1
    A
    A
    Default Behaviour on completed source
    

    View Slide

53. Source
    Subscriber 1
    Backend
    Subscriber 2
    Subscriber 3
    share()
    Subject
    Runs: 2
    B
    A
    A
    Default Behaviour on completed source
    

    View Slide

54. Source
    Subscriber 1
    Backend
    Subscriber 2
    Subscriber 3
    share()
    Subject
    Runs: 2
    B
    A
    A
    Default Behaviour on completed source
    

    View Slide

55. Source
    Subscriber 1
    Backend
    Subscriber 2
    Subscriber 3
    share()
    Subject
    Runs: 2
    B
    A
    A
    Default Behaviour on completed source
    

    View Slide

56. View Slide

57. Source
    Subscriber 1
    Backend
    A
    Subscriber 2
    A
    Subscriber 3
    share()
    Subject
    Runs: 1
    share({ resetOnComplete: false })
    

    View Slide

58. Source
    Subscriber 1
    Backend
    A
    Subscriber 2
    A
    Subscriber 3
    share()
    Subject
    Runs: 1
    share({ resetOnComplete: false })
    

    View Slide

59. Source
    Subscriber 1
    Backend
    A
    Subscriber 2
    A
    Subscriber 3
    share()
    Subject
    Runs: 1
    share({ resetOnComplete: false })
    

    View Slide

60. Source
    Subscriber 1
    Backend
    A
    Subscriber 2
    A
    Subscriber 3
    share()
    Subject
    Runs: 1
    share({ resetOnComplete: false })
    

    View Slide

61. Source
    Subscriber 1
    Backend
    A
    Subscriber 2
    A
    Subscriber 3
    share()
    Subject
    Runs: 1
    share({ resetOnComplete: false })
    

    View Slide

62. Source
    Subscriber 1
    Backend
    A
    Subscriber 2
    A
    Subscriber 3
    share()
    Subject
    Runs: 1
    share({ resetOnComplete: false })
    

    View Slide

63. Source
    Subscriber 1
    Backend
    A
    Subscriber 2
    A
    Subscriber 3
    share()
    ReplaySubject
    Runs: 1
    share({
    connector: new ReplaySubject(),
    resetOnComplete: false
    })
    A
    

    View Slide

64. Source
    Subscriber 1
    Backend
    A
    Subscriber 2
    A
    Subscriber 3
    share()
    ReplaySubject
    Runs: 1
    share({
    connector: new ReplaySubject(),
    resetOnComplete: false
    })
    A
    A
    

    View Slide

65. Source
    Subscriber 1
    Backend
    A
    Subscriber 2
    A
    Subscriber 3
    share()
    ReplaySubject
    Runs: 1
    share({
    connector: new ReplaySubject(),
    resetOnComplete: false
    })
    A
    A
    

    View Slide

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?
    

    View Slide

67. Source
    Subscriber 1
    Backend
    Subscriber 2
    Subscriber 3
    share()
    Subject
    Runs: 1
    A
    Default Behaviour on unsubscribed
    

    View Slide

68. Source
    Subscriber 1
    Backend
    Subscriber 2
    Subscriber 3
    share()
    Subject
    Runs: 1
    A
    Default Behaviour on unsubscribed
    

    View Slide

69. Source
    Subscriber 1
    Backend
    A
    Subscriber 2
    A
    Subscriber 3
    share()
    Subject
    Runs: 1
    Default Behaviour on unsubscribed
    

    View Slide

70. Source
    Subscriber 1
    Backend
    A
    Subscriber 2
    A
    Subscriber 3
    share()
    Subject
    Runs: 1
    Default Behaviour on unsubscribed
    

    View Slide

71. Source
    Subscriber 1
    Backend
    A
    Subscriber 2
    A
    Subscriber 3
    share()
    Subject
    Runs: 1
    Default Behaviour on unsubscribed
    

    View Slide

72. Source
    Subscriber 1
    Backend
    A
    Subscriber 2
    A
    Subscriber 3
    share()
    Subject
    Runs: 1
    Default Behaviour on unsubscribed
    

    View Slide

73. Source
    Subscriber 1
    Backend
    A
    Subscriber 2
    A
    Subscriber 3
    share()
    Subject
    Runs: 1
    Default Behaviour on unsubscribed
    

    View Slide

74. Source
    Subscriber 1
    Backend
    A
    Subscriber 2
    A
    Subscriber 3
    share()
    Subject
    Runs: 1
    Default Behaviour on unsubscribed
    

    View Slide

75. Source
    Subscriber 1
    Backend
    A
    Subscriber 2
    A
    Subscriber 3
    share()
    Subject
    Default Behaviour on unsubscribed
    

    View Slide

76. Source
    Subscriber 1
    Backend
    Runs: 1
    A
    Subscriber 2
    A
    Subscriber 3
    share()
    Subject
    Default Behaviour on unsubscribed
    

    View Slide

77. Source
    Subscriber 1
    Backend
    Runs: 1
    A
    Subscriber 2
    A
    Subscriber 3
    share()
    Subject
    Default Behaviour on unsubscribed
    

    View Slide

78. Source
    Subscriber 1
    Backend
    Subscriber 2
    Subscriber 3
    share()
    Subject
    Runs: 1
    A
    A
    Default Behaviour on unsubscribed
    

    View Slide

79. Source
    Subscriber 1
    Backend
    Subscriber 2
    Subscriber 3
    share()
    Subject
    Runs: 2
    B
    A
    A
    Default Behaviour on unsubscribed
    

    View Slide

80. Source
    Subscriber 1
    Backend
    Subscriber 2
    Subscriber 3
    share()
    Subject
    Runs: 2
    B
    A
    A
    Default Behaviour on unsubscribed
    

    View Slide

81. Source
    Subscriber 1
    Backend
    Subscriber 2
    Subscriber 3
    share()
    Subject
    Runs: 2
    B
    A
    A
    Default Behaviour on unsubscribed
    

    View Slide

82. View Slide

83. Source
    Subscriber 1
    Backend
    A
    Subscriber 2
    A
    Subscriber 3
    share()
    ReplaySubject
    Runs: 1
    share({
    connector: new ReplaySubject(),
    resetOnComplete: false,
    resetOnRefCountZero: false
    })
    A
    

    View Slide

84. Source
    Subscriber 1
    Backend
    A
    Subscriber 2
    A
    Subscriber 3
    share()
    ReplaySubject
    Runs: 1
    A
    share({
    connector: new ReplaySubject(),
    resetOnComplete: false,
    resetOnRefCountZero: false
    })
    

    View Slide

85. Source
    Subscriber 1
    Backend
    A
    Subscriber 2
    A
    Subscriber 3
    share()
    ReplaySubject
    Runs: 1
    A
    share({
    connector: new ReplaySubject(),
    resetOnComplete: false,
    resetOnRefCountZero: false
    })
    

    View Slide

86. Source
    Subscriber 1
    Backend
    Subscriber 2
    Subscriber 3
    share()
    ReplaySubject
    Runs: 1
    A
    A
    A
    share({
    connector: new ReplaySubject(),
    resetOnComplete: false,
    resetOnRefCountZero: false
    })
    

    View Slide

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
    })
    

    View Slide

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
    })
    

    View Slide

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?
    

    View Slide

90. Summary
    ● Try to use share for all multicasting operations
    ● toPromise deprecated
    ● combinateLatest with object notation
    ● import ☹ statements changed
    

    View Slide