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

    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