Upgrade to Pro — share decks privately, control downloads, hide ads and more …

One Share to Rule them All

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

Rainer Hahnekamp

September 13, 2021
Tweet

More Decks by Rainer Hahnekamp

Other Decks in Technology

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() );
  7. None
  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
  56. None
  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
  82. None
  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