Learn RxJS
Search…
Subjects
A Subject is a special type of Observable which shares a single execution path among observers.
You can think of this as a single speaker talking at a microphone in a room full of people. Their message (the subject) is being delivered to many (multicast) people (the observers) at once. This is the basis of multicasting. Typical observables would be comparable to a 1 on 1 conversation.
There are 4 variants of subjects:
- Subject - No initial value or replay behavior.
- AsyncSubject - Emits latest value to observers upon completion.
- BehaviorSubject - Requires an initial value and emits its current value (last emitted item) to new subscribers.
- ReplaySubject - Emits specified number of last emitted values (a replay) to new subscribers.
Contents
Subjects comparison
1
/*
2
s1 n(r) n(x) s2 n(j) c n(s)
3
Subject
4
s1 ^-----r------x--------------j------|----------
5
s2 ---------------------^------j------|----------
6
AsyncSubject
7
s1 ^----------------------------------j|---------
8
s2 ---------------------^-------------j|---------
9
BehaviorSubject
10
s1 ^a----r------x--------------j------|----------
11
s2 ---------------------^x-----j------|----------
12
ReplaySubject
13
s1 ^-----r------x--------------j------|----------
14
s2 ---------------------^r-x---j------|----------
15
*/
16
​
17
// RxJS v6+
18
import { Subject, AsyncSubject, BehaviorSubject, ReplaySubject } from 'rxjs';
19
​
20
const subject = new Subject();
21
const asyncSubject = new AsyncSubject();
22
const behaviorSubject = new BehaviorSubject('a');
23
const replaySubject = new ReplaySubject(2);
24
​
25
const subjects = [subject, asyncSubject, behaviorSubject, replaySubject];
26
const log = subjectType => e => console.log(`${subjectType}: ${e}`);
27
​
28
console.log('SUBSCRIBE 1');
29
subject.subscribe(log('s1 subject'));
30
asyncSubject.subscribe(log('s1 asyncSubject'));
31
behaviorSubject.subscribe(log('s1 behaviorSubject'));
32
replaySubject.subscribe(log('s1 replaySubject'));
33
​
34
console.log('\nNEXT(r)');
35
subjects.forEach(o => o.next('r'));
36
​
37
console.log('\nNEXT(x)');
38
subjects.forEach(o => o.next('x'));
39
​
40
console.log('\nSUBSCRIBE 2');
41
subject.subscribe(log('s2 subject'));
42
asyncSubject.subscribe(log('s2 asyncSubject'));
43
behaviorSubject.subscribe(log('s2 behaviorSubject'));
44
replaySubject.subscribe(log('s2 replaySubject'));
45
​
46
console.log('\nNEXT(j)');
47
subjects.forEach(o => o.next('j'));
48
​
49
console.log('\nCOMPLETE');
50
subjects.forEach(o => o.complete());
51
​
52
console.log('\nNEXT(s)');
53
subjects.forEach(o => o.next('s'));
54
​
55
/*
56
OUTPUT:
57
​
58
SUBSCRIBE 1
59
s1 behaviorSubject: a
60
​
61
NEXT(r)
62
s1 subject: r
63
s1 behaviorSubject: r
64
s1 replaySubject: r
65
​
66
NEXT(x)
67
s1 subject: x
68
s1 behaviorSubject: x
69
s1 replaySubject: x
70
​
71
SUBSCRIBE 2
72
s2 behaviorSubject: x
73
s2 replaySubject: r
74
s2 replaySubject: x
75
​
76
NEXT(j)
77
s1 subject: j
78
s2 subject: j
79
s1 behaviorSubject: j
80
s2 behaviorSubject: j
81
s1 replaySubject: j
82
s2 replaySubject: j
83
​
84
COMPLETE
85
s1 asyncSubject: j
86
s2 asyncSubject: j
87
​
88
NEXT(s)
89
*/
Copied!
Additional Resources
- 📰
- 📰
- 📰 - Ben Lesh
Last modified 2yr ago
Copy link