Rxjs Operators are special type of functions that take input as an observable and then return an observable as an output that means Operators work with observable to make various kind of operations in angular or JavaScript. Operators may help us make Angular application more faster.
RxJS is a powerful tool for composing asynchronous and event-based programs. It provides over one hundred operators, many of which are used frequently. In this article, we'll explore the most commonly used RxJS operators.
Operators are functions that take observable sequences as input and produce output by combining or transforming the input sequences.
RxJS provides a wide variety of operators, each with a specific purpose.
Operators are an important part of RxJS. They allow developers to control how data is emitted from an observable stream. There are many different types of operators, each with their own purpose. Some common operators include: map, filter, reduce, and concatMap.
Learning objectives
- What are operators in rxjs ?
- map operator
- debounceTime operator
- distinctUnitChanged operator
- throttleTime operator
- forkJoin operator
- pluck operator
- pipe operator
- mergeMap operator
- combinelatest operator
- Summary
What are operators in rxjs ?
RxJS is a library for reactive programming using observables that enables composition of asynchronous or callback-based code.
Operators are functions that build on the observable foundation to enable sophisticated manipulation of collections. RxJS ships with more than 130 operators, many of which are useful for everyday use.
Some common operators include map(), filter() etc, These are all functions that take an observable as input and return an observable as output.
the output observable may be a modified version of the input observable, or it may be a completely new observable.
Operators can be used to perform simple tasks like mapping values from one type to another, or they can be used to build complex pipelines that perform multiple actions on the data before returning the final result.
Today I am going to share top 9 commonly used Rxjs operators you need to know to get started with. In the Queue first we have
1. map Operator
map Operator is most commonly used operator while using Rxjs. it is used to to transform the each value emitted by the source observable. simply it creates new observable after manipulating the each items of source observable.
We use map() operator in pipe function where we can chain multiple operator together to get the desired output from an observable. Lets see how we can apply projection with each value from source observable.
// RxJS v6+
import { from } from 'rxjs';
import { map } from 'rxjs/operators';
//emit (1,2,3,4,5)
const source = from([1, 2, 3, 4, 5]);
//add 10 to each value
const example = source.pipe(map(val => val + 10));
//output: 11,12,13,14,15
const subscribe = example.subscribe(val => console.log(val));2. debounceTime Operator
While working on web page we often have such scenarios where we have to control user input or typing. there we get debounceTime() on the track. with the help of debounceTime() we can create delay for given time span and without another source emission.
The best part of debounceTime() is that within the given time span if a new value arrives then the previous pending value gets dropped so we only get the latest value emitted by the source observable.
// RxJS v6+
import { fromEvent } from 'rxjs';
import { debounceTime, map } from 'rxjs/operators';
// elem ref
const searchBox = document.getElementById('search');
// streams
const keyup$ = fromEvent(searchBox, 'keyup');
// wait .5s between keyups to emit current value
keyup$
.pipe(
map((i: any) => i.currentTarget.value),
debounceTime(500)
)
.subscribe(console.log);3. distinctUnitChanged Operator
In such scenario where we get input from user and want to avoid unnecessary API hits e.g. Search box. Where we only want distinct values based on last emitted value to hit the API.
then distinctUntilChanged operator comes in the game and handle such scenarios so that application can avoid unnecessary API hit.
With this operator we can use debounceTime() to give it some time to get the distinct value for search bar kind's of functionalities. debounceTime() and distinctUnitChanged() makes search bar more productive. These both operators return an observable.
// RxJS v6+
import { from } from 'rxjs';
import { distinctUntilChanged } from 'rxjs/operators';
// only output distinct values, based on the last emitted value
const source$ = from([1, 1, 2, 2, 3, 3]);
source$
.pipe(distinctUntilChanged())
// output: 1,2,3
.subscribe(console.log);4. throttleTime operator
Throttle time operator, can make a delay given to it but first emits value from source observable and it is used to ignore subscription for given time like when we want to hit an API but you want a delay but want to get the latest value emitted from source observable then,
ThrottleTime operator can be used. it seems similar to debounceTime operator where it is also make delay for the subscriptions but debounceTime() is only emits the last value emitted in source observable and throttleTime() picks the latest value emitted in the source observable.
// RxJS v6+
import { interval } from 'rxjs';
import { throttleTime } from 'rxjs/operators';
// emit value every 1 second
const source = interval(1000);
/*
emit the first value, then ignore for 5 seconds. repeat...
*/
const example = source.pipe(throttleTime(5000));
// output: 0...6...12
const subscribe = example.subscribe(val => console.log(val));5. forkJoin Operator
We can use multiple observable execution with forkJoin() operator but it waits for all observables to be completed then it only emits the last value from each observable Remember if any of the observable does not complete then the forkJoin() will never complete.
This operator is best when you have such scenarios where you want to get the only last value while having group of observable execution.
this is not a best choice to used for multiple API calls because there if we have error in any of the API's then if the error is not handle properly it might get you in trouble so it is not considered as a best approach,
On that place you can use combineLatest operator and zip operator but if you are not making API hit with forkJoin() for multiple observable executions then forkJoin() operator is best approach.
// RxJS v6.5+
import { ajax } from 'rxjs/ajax';
import { forkJoin } from 'rxjs';
/*
when all observables complete, provide the last
emitted value from each as dictionary
*/
forkJoin(
// as of RxJS 6.5+ we can use a dictionary of sources
{
google: ajax.getJSON('https://api.github.com/users/google'),
microsoft: ajax.getJSON('https://api.github.com/users/microsoft'),
users: ajax.getJSON('https://api.github.com/users')
}
)
// { google: object, microsoft: object, users: array }
.subscribe(console.log);6. pluck operator
Pluck operator is used to pluck a property or value and then return in subscription. pluck is useful when you don't want unnecessary in the stream and you can pluck them in the on going execution.
pluck will return undefined if it does not find the given property of value in it.
We can pluck multiple property like if we use an observable of array type then we can select multiple properties to be plucked.
// RxJS v6+
import { from } from 'rxjs';
import { pluck } from 'rxjs/operators';
const source = from([
{ name: 'Joe', age: 30, job: { title: 'Developer', language: 'JavaScript' } },
//will return undefined when no job is found
{ name: 'Sarah', age: 35 }
]);
//grab title property under job
const example = source.pipe(pluck('job', 'title'));
//output: "Developer" , undefined
const subscribe = example.subscribe(val => console.log(val));7. pipe operator
pipe operator in rxjs is an operator that allows you to combine multiple operators into a single operator. This can be useful if you want to apply multiple operators to an observable stream.
The pipe operator takes one or more operators as arguments and returns an operator that combines the operators. this is useful for creating complex Observables from simple ones.
For example, you can use the pipe operator to map an Observable of numbers to an Observable of strings.
To use the pipe operator, simply chain together the operators you want to use, starting with the source observable:
const source = of(1, 2, 3);
const mapped = source.pipe(map(x => x + '!'));8. mergeMap operator
Merge map operator is often get used when the requirement is to merge response from two observables.
This rxjs operator return an observable after merging the response from two observables, things to notice here is that second observable does not execute until merged observable emits some response.
This is very popular operator of rxjs we usually get to merge two responses of observable type while working with web pages in Angular or JavaScript.
import { of, interval } from 'rxjs';
import { mergeMap, map } from 'rxjs/operators';
const letters = of('a', 'b', 'c');
const result = letters.pipe(
mergeMap(x => interval(1000).pipe(map(i => x+i))),
);
result.subscribe(x => console.log(x));
// Results in the following:
// a0
// b0
// c0
// a1
// b1
// c1
// continues to list a,b,c with respective ascending integers9. combine latest operator
Combinelatest operator is used to execute multiple observable at once , it only emits the latest value from each source observable (does not like forkJoin() operator).
To run combinelatest operator we must have value in observable and combinelatest operator will not execute until each of source observable emits at least one value.
// RxJS v6+
import { timer, combineLatest } from 'rxjs';
// timerOne emits first value at 1s, then once every 4s
const timerOne$ = timer(1000, 4000);
// timerTwo emits first value at 2s, then once every 4s
const timerTwo$ = timer(2000, 4000);
// timerThree emits first value at 3s, then once every 4s
const timerThree$ = timer(3000, 4000);
// when one timer emits, emit the latest values from each timer as an array
combineLatest(timerOne$, timerTwo$, timerThree$).subscribe(
([timerValOne, timerValTwo, timerValThree]) => {
/*
Example:
timerThree first tick: 'Timer One Latest: 0, Timer Two Latest: 0, Timer Three Latest: 0
timerOne second tick: 'Timer One Latest: 1, Timer Two Latest: 0, Timer Three Latest: 0
timerTwo second tick: 'Timer One Latest: 1, Timer Two Latest: 1, Timer Three Latest: 0
*/
console.log(
`Timer One Latest: ${timerValOne},
Timer Two Latest: ${timerValTwo},
Timer Three Latest: ${timerValThree}`
);
}
);Summary
Using RxJS operators in Angular can be very useful. They can help you perform complex operations on your data, and they can also help you improve the performance of your applications.
If you're not already using them, I encourage you to give them a try.
These rxjs operators are all important in different ways and can be used to solve different types of problems. Be sure to learn about each one so that you can use them effectively in your own projects.
In this Section, we focused on some of most commonly used rxjs Operators in Angular. The list is huge for Rxjs Operators check this link to find them all.
We have seen how they can be used to create observables and subscribe to them. We have also seen how they can be used to manipulate data. Finally, we have seen how they can be used to perform side effects.
Thanks for reading.
.jpg)
1 Comments
Very useful article
ReplyDelete