Reactive Programming: Introduction to RxJS

Understanding the Basics of Reactive Programming 

Reactive programming is a paradigm that focuses on asynchronous data streams and the propagation of changes. It allows you to work with asynchronous events as if they were synchronous.  

Core Concepts 

• Observable: Represents a stream of data or events. Observables are the core of RxJS. 

• Observer: An object that receives notifications from an Observable. 

• Subscription: Represents the execution of an Observable. You can unsubscribe to stop receiving data. 

• Operators: Functions that allow you to transform, filter, and combine Observables. Common operators include map, filter, merge, and switchMap. 

Creating Observables 

Use Observable.create or helper functions like of, from, and interval to create Observables. 

const observable = Rx.Observable.of(1, 2, 3); 

Subscribing to Observables 

Use the subscribe method to listen to data emitted by an Observable. 

observable.subscribe({ 

next: value => console.log(value), 

error: err => console.error(err), 

complete: () => console.log('Complete') 

}); 

Using Operators 

Operators are used to manipulate and control the data streams. Learn and practice using different operators. 

observable 

.pipe( 

map(value => value * 2), 

filter(value => value > 2) 

) 

.subscribe(value => console.log(value)); 

Handling Errors Gracefully 

Use operators like catchError and retry to handle errors in your data streams. 

observable 

.pipe( 

catchError(err => of('Error handled')) 

) 

.subscribe(value => console.log(value)); 

Combining Multiple Streams 

Learn to use combination operators like merge, concat, combineLatest, and forkJoin to handle multiple streams. 

const obs1 = Rx.Observable.of(1, 2, 3); 

const obs2 = Rx.Observable.of('a', 'b', 'c'); 

Rx.Observable.combineLatest(obs1, obs2) 

.subscribe(([val1, val2]) => console.log(val1, val2)); 

Understanding Hot vs. Cold Observables 

Cold Observables start emitting values when they are subscribed to.  

Hot Observables start emitting values immediately, independent of subscriptions. 

Using Subjects for Multicasting 

Subjects are a special type of Observable that allow values to be multicasted to multiple Observers. 

const subject = new Rx.Subject(); 

subject.subscribe(value => console.log('Observer 1:', value)); 

subject.subscribe(value => console.log('Observer 2:', value)); 

subject.next('Hello'); 

Leveraging RxJS in Angular 

Angular makes extensive use of RxJS. To fully leverage the power of reactive programming in Angular applications, it's important to understand how to use observables with Angular services, components, and forms. 

By: Alexis Barcia