What are the common operators used in RxJS

RxJS (Reactive Extensions for JavaScript) provides a vast array of operators that allow you to manipulate, transform, filter, combine, and control the flow of data emitted by observables. Here’s a list of some common operators used in RxJS:

Transformation Operators:

1. map: Transforms each emitted item by applying a function to it.

import { map } from 'rxjs/operators';

source.pipe(

  map(value => value * 2)

);

2. pluck: Picks a specific property from each emitted object.

import { pluck } from 'rxjs/operators';

source.pipe(

  pluck('name')

);

3. switchMap: Projects each source value to an observable, and flattens the inner observables into a single observable.

import { switchMap } from 'rxjs/operators';

source.pipe(

  switchMap(value => getDataFromServer(value))

);

4. mergeMap (flatMap): Projects each source value to an observable, and merges the inner observables into a single observable sequence.

import { mergeMap } from 'rxjs/operators';

source.pipe(

  mergeMap(value => getDataFromServer(value))

);

Filtering Operators:

5. filter: Emits only those items from the source observable that pass a predicate test.

import { filter } from 'rxjs/operators';

source.pipe(

  filter(value => value > 10)

);

6. debounceTime: Emits a value from the source observable only after a specified period of inactivity.

import { debounceTime } from 'rxjs/operators';

source.pipe(

  debounceTime(300)

);

7. distinctUntilChanged: Emits values from the source observable only if they are different from the previous value.

import { distinctUntilChanged } from 'rxjs/operators';

source.pipe(

  distinctUntilChanged()

);

Combination Operators:

8. merge: Combines multiple observables into one by merging their emissions.

import { merge } from 'rxjs';

merge(source1, source2);

9. concat: Concatenates multiple observables, emitting values from each in sequence.

import { concat } from 'rxjs';

concat(source1, source2);

Utility Operators:

10. tap (do): Perform side effects with each emission on the source observable without affecting the emitted value.

import { tap } from 'rxjs/operators';

source.pipe(

  tap(value => console.log(value))

);

11. finalize: Perform a side effect when an observable completes or errors, but does not intercept values.

import { finalize } from 'rxjs/operators';

source.pipe(

  finalize(() => console.log('Observable completed.'))

);

Error Handling Operators:

12. catchError (catch): Handles errors emitted by the source observable, returning a new observable or throwing an error.

import { catchError } from 'rxjs/operators';

source.pipe(

  catchError(error => handleError(error))

);

Conditional and Boolean Operators:

13. takeUntil: Emits values from the source observable until another observable emits.

import { takeUntil } from 'rxjs/operators';

source.pipe(

  takeUntil(stopObservable)

);

14. skip: Skips the first n emissions from the source observable.

import { skip } from 'rxjs/operators';

source.pipe(

  skip(3)

);

These are just a few examples of the many operators available in RxJS. Operators can be combined and used together to create complex data processing pipelines, enabling powerful reactive programming capabilities in Angular and other JavaScript applications. Understanding these operators allows you to efficiently handle asynchronous data streams and manage application state in a declarative and reactive manner.