Scribd
Upload
13 views

Whoa

The document provides an overview of key RxJS concepts like operators for transforming and filtering data, subjects and behaviorsubjects, cold vs hot observables, and differences between observables and promises. It also explains higher order mapping operators like concatmap, switchmap, mergeMap and exhaustmap.

Uploaded by

guntupalli.usa
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
13 views

Whoa

The document provides an overview of key RxJS concepts like operators for transforming and filtering data, subjects and behaviorsubjects, cold vs hot observables, and differences between observables and promises. It also explains higher order mapping operators like concatmap, switchmap, mergeMap and exhaustmap.

Uploaded by

guntupalli.usa
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 6

Whoa, slow down there! That's quite a list of RxJS topics. Let's tackle them one by one. Ready?

Pros and cons of RxJS:

Pros:

1. **Reactive Programming:** Enables a declarative approach to handling asynchronous operations.

2. **Composability:** Easily compose complex asynchronous logic.

3. **Error Handling:** Provides effective error handling mechanisms.

4. **Cancellation:** Supports cancellation of operations.

5. **Event Handling:** Simplifies event handling and data manipulation.

Cons:

1. **Learning Curve:** It can be a bit challenging for newcomers.

2. **Overhead:** Introducing RxJS might be overkill for simple applications.

3. **Debugging:** Debugging reactive code can be tricky.

How to transform data in RxJS:

In RxJS, you can use the `map` operator to transform data emitted by an observable. It's like a
powerhouse for data transformation.

```javascript

import { of } from 'rxjs';

import { map } from 'rxjs/operators';

const source = of(1, 2, 3, 4, 5);

const squared = source.pipe(map(value => value * value));

squared.subscribe(result => console.log(result)); // Output: 1, 4, 9, 16, 25


```

How filter works in RxJS:

The `filter` operator lets you selectively emit values based on a condition.

```javascript

import { of } from 'rxjs';

import { filter } from 'rxjs/operators';

const source = of(1, 2, 3, 4, 5);

const evenNumbers = source.pipe(filter(value => value % 2 === 0));

evenNumbers.subscribe(result => console.log(result)); // Output: 2, 4

```

How to implement error handling in RxJS:

You can use the `catchError` operator to handle errors in RxJS.

```javascript

import { of } from 'rxjs';

import { catchError } from 'rxjs/operators';

const source = of('a', 'b', 'c').pipe(

map(value => value.toUpperCase()),

catchError(error => of('Error Occurred'))

);
source.subscribe(

result => console.log(result),

error => console.error(error)

);

```

What does the `combineLatest` operator do in RxJS?

`combineLatest` merges the latest values from multiple observables into an array, producing a new value
whenever any of the source observables emits. It's like a synchronizing dance where partners
(observables) step together whenever any one of them takes a step.

```javascript

import { combineLatest, interval } from 'rxjs';

const observable1 = interval(1000); // emits 0, 1, 2, 3, ...

const observable2 = interval(500); // emits 0, 1, 2, 3, ...

const combined = combineLatest(observable1, observable2);

combined.subscribe(([val1, val2]) => {

console.log(`Latest from observable1: ${val1}, Latest from observable2: ${val2}`);

});

```

How do `Subject` and `BehaviorSubject` work in RxJS?

- **Subject:** A special type of observable that allows values to be multicasted to multiple observers.
Think of it as a radio station. When a song (value) is played, all listeners (observers) hear it.
```javascript

import { Subject } from 'rxjs';

const subject = new Subject();

subject.subscribe(data => console.log(`Observer 1: ${data}`));

subject.next('Hello');

subject.subscribe(data => console.log(`Observer 2: ${data}`));

subject.next('World');

```

- **BehaviorSubject:** Extends `Subject` and requires an initial value. It remembers the latest value and
emits it to new subscribers immediately upon subscription.

```javascript

import { BehaviorSubject } from 'rxjs';

const behaviorSubject = new BehaviorSubject('Initial Value');

behaviorSubject.subscribe(data => console.log(`Observer 1: ${data}`));

behaviorSubject.next('Hello');

behaviorSubject.subscribe(data => console.log(`Observer 2: ${data}`));

behaviorSubject.next('World');

```
Observables vs Promises - what's the difference?

- **Observables:**

- Handle multiple values over time.

- Support cancellation.

- Lazy (don't run unless subscribed).

- Can be synchronous or asynchronous.

- **Promises:**

- Handle a single value or an error.

- Cannot be canceled once initiated.

- Eager (start running immediately).

- Always asynchronous.

Cold vs hot observables - what's the difference?

- **Cold Observables:** Produce values independently for each subscriber. Each subscriber gets its own
set of values.

```javascript

import { interval } from 'rxjs';

const coldObservable = interval(1000);

coldObservable.subscribe(value => console.log(`Subscriber 1: ${value}`));

// After some time...

coldObservable.subscribe(value => console.log(`Subscriber 2: ${value}`));

```
- **Hot Observables:** Share the same set of values among all subscribers. Subscribers might miss
values if they subscribe late.

```javascript

import { interval, fromEvent } from 'rxjs';

import { take } from 'rxjs/operators';

const hotObservable = interval(1000).pipe(take(5));

hotObservable.subscribe(value => console.log(`Subscriber 1: ${value}`));

// After some time...

hotObservable.subscribe(value => console.log(`Subscriber 2: ${value}`));

```

And now, for the grand finale, `concatMap`, `switchMap`, `mergeMap`, `map`, and `exhaustMap` in RxJS.

`concatMap`: Maps each value to an observable and concatenates them, maintaining the order.

`switchMap`: Maps each value to an observable, cancels the previous observable, and switches to the
new one.

`mergeMap`: Maps each value to an observable and merges the resulting observables concurrently.

`map`: Projects each source value to a specific value.

`exhaustMap`: Maps each value to an observable but ignores new values until the inner observable
completes.

You might also like