Introduction
RxJS (Reactive Extensions for JavaScript) is a library that brings the concept of reactive programming that deals with asynchronous data calls, callbacks, and event-based programs using observables. It provides a lot of operators to allow handling asynchronous events as collections. Using the Observables pattern, RxJS comes with two other types of Observables, which include Subject and BehaviorSubject. Understanding the distinctions between Observable, Subject, and BehaviorSubject is important while building Reactive applications, which this article intends to outline.
The YouTube Channels in both English (En) and French (Fr) are now accessible, feel free to subscribe by clicking here.
Observable
An Observable is a function that creates an observer and attaches it to the source where events are expected. It performs this by calling a subscribe() method where you can access the published event. With Observable, we can only consume events but not emit them, which implies that we can have many consumers but only one producer. One thing to notice is that the producer will run as many times for each observer.
Methods
- subscribe
Example
import { Observable } from 'rxjs';
let observable = new Observable(
function subscribe(observer) {
observer.next("My First Observable")
}
);
observable.subscribe(x => console.log(x));
// Output: My First Observable
Subject
A Subject is a type of observable that allows, unlike a simple observable, the ability to publish an event after subscription, but it has no initial value. In addition to the subscribe() method, it has a method next() that is used to emit events. The Subject is stateful and the producer executes only once for all listeners/observers.
Methods
- subscribe
- next
Example
import { Subject } from 'rxjs';
const subject = new Subject();
subject.next('value 0');
// Output: no listeners so nothing to output
subject.subscribe(val => console.log(val));
subject.next('value 1');
// Output: value 1
subject.next('value 2');
// Output: value 2
BehaviorSubject
About BehaviorSubject, this one is very similar to Subject except that it can have an initial value. Technically, it extends from the Subject model while ensuring the last published event is received by new consumers/listeners.
Methods
- subscribe
- next
Example
import { BehavioSubject } from 'rxjs';
const behaviorsubject = new BehavioSubject(‘initial’);
behaviorsubject.next('value 0');
behaviorsubject.subscribe(val => console.log(val));
// Output: value 0
behaviorsubject.next('value 1');
// Output: value 1
behaviorsubject.next('value 2');
// Output: value 2
Difference Between Observable and Subject
To have a detailed difference between Observables and Subjects, take a look at this article that clarifies it:
If you are interested in building a Custom State Management, the following article is for you:
———————
We have just started our journey to build a network of professionals to grow our free knowledge-sharing community that’ll give you a chance to learn interesting things about topics like cloud computing, software development, and software architectures while keeping the door open to more opportunities.
Does this speak to you? If YES, feel free to Join our Discord Server to stay in touch with the community and be part of independently organized events.
———————
Conclusion
We hope this article has cleared up any confusion surrounding Observable, Subject, and BehaviorSubject. If you have any further thoughts or insights to add, please do not hesitate to share them with us. We welcome all feedback and suggestions.
Thanks for reading this article. Like, recommend, and share if you enjoyed it. Follow us on Facebook, Twitter, and LinkedIn for more content.
