Learn RxJS
Search…
shareReplay
signature: shareReplay(bufferSize?: number, windowTime?: number, scheduler?I IScheduler): Observable
shareReplay(bufferSize?: number, windowTime?: number, scheduler?I IScheduler): ObservableShare source and replay specified number of emissions on subscription.
Why use shareReplay?
shareReplay?You generally want to use
shareReplay when you have side-effects or taxing computations that you do not wish to be executed amongst multiple subscribers. It may also be valuable in situations where you know you will have late subscribers to a stream that need access to previously emitted values. This ability to replay values on subscription is what differentiates share and shareReplay.For instance, suppose you have an observable that emits the last visited url. In the first example we are going to use
share:1
// simulate url change with subject
2
const routeEnd = new Subject<{data: any, url: string}>();
3
4
// grab url and share with subscribers
5
const lastUrl = routeEnd.pipe(
6
pluck('url'),
7
share()
8
);
9
10
// initial subscriber required
11
const initialSubscriber = lastUrl.subscribe(console.log);
12
13
// simulate route change
14
routeEnd.next({data: {}, url: 'my-path'});
15
16
// nothing logged
17
const lateSubscriber = lastUrl.subscribe(console.log);
Copied!
In the above example nothing is logged as the
lateSubscriber subscribes to the source. Now suppose instead we wanted to give access to the last emitted value on subscription, we can accomplish this with shareReplay:1
import { Subject } from 'rxjs/Subject';
2
import { ReplaySubject } from 'rxjs/ReplaySubject';
3
import { pluck, share, shareReplay, tap } from 'rxjs/operators';
4
5
// simulate url change with subject
6
const routeEnd = new Subject<{data: any, url: string}>();
7
8
// grab url and share with subscribers
9
const lastUrl = routeEnd.pipe(
10
tap(_ => console.log('executed')),
11
pluck('url'),
12
// defaults to all values so we set it to just keep and replay last one
13
shareReplay(1)
14
);
15
16
// requires initial subscription
17
const initialSubscriber = lastUrl.subscribe(console.log);
18
19
// simulate route change
20
// logged: 'executed', 'my-path'
21
routeEnd.next({data: {}, url: 'my-path'});
22
23
// logged: 'my-path'
24
const lateSubscriber = lastUrl.subscribe(console.log);
Copied!
Note that this is similar behavior to what you would see if you subscribed a
ReplaySubject to the lastUrl stream, then subscribed to that Subject:1
// simulate url change with subject
2
const routeEnd = new Subject<{data: any, url: string}>();
3
4
// instead of using shareReplay, use ReplaySubject
5
const shareWithReplay = new ReplaySubject();
6
7
// grab url and share with subscribers
8
const lastUrl = routeEnd.pipe(
9
pluck('url')
10
)
11
.subscribe(val => shareWithReplay.next(val));
12
13
// simulate route change
14
routeEnd.next({data: {}, url: 'my-path'});
15
16
// subscribe to ReplaySubject instead
17
// logged: 'my path'
18
shareWithReplay.subscribe(console.log);
Copied!
In fact, if we dig into the source code we can see a very similar technique is being used. When a subscription is made,
shareReplay will subscribe to the source, sending values through an internal ReplaySubject:1
return function shareReplayOperation(this: Subscriber<T>, source: Observable<T>) {
2
refCount++;
3
if (!subject || hasError) {
4
hasError = false;
5
subject = new ReplaySubject<T>(bufferSize, windowTime, scheduler);
6
subscription = source.subscribe({
7
next(value) { subject.next(value); },
8
error(err) {
9
hasError = true;
10
subject.error(err);
11
},
12
complete() {
13
isComplete = true;
14
subject.complete();
15
},
16
});
17
}
18
19
20
const innerSub = subject.subscribe(this);
21
22
23
return () => {
24
refCount--;
25
innerSub.unsubscribe();
26
if (subscription && refCount === 0 && isComplete) {
27
subscription.unsubscribe();
28
}
29
};
30
};
31
}
Copied!
Examples
Example 1: Multiple subscribers sharing source
1
// RxJS v6+
2
import { Subject, ReplaySubject } from 'rxjs';
3
import { pluck, share, shareReplay, tap } from 'rxjs/operators';
4
5
// simulate url change with subject
6
const routeEnd = new Subject<{data: any, url: string}>();
7
// grab url and share with subscribers
8
const lastUrl = routeEnd.pipe(
9
tap(_ => console.log('executed')),
10
pluck('url'),
11
// defaults to all values so we set it to just keep and replay last one
12
shareReplay(1)
13
);
14
// requires initial subscription
15
const initialSubscriber = lastUrl.subscribe(console.log)
16
// simulate route change
17
// logged: 'executed', 'my-path'
18
routeEnd.next({data: {}, url: 'my-path'});
19
// logged: 'my-path'
20
const lateSubscriber = lastUrl.subscribe(console.log);
Copied!
Additional Resources
Last modified 2yr ago