Map, switchMap, mergeMap, flatMap, concatMap, exhaustMap in RxJS - what is the difference?

[@MonsterlessonsAcademy]

WATCH NEXT: Beginner's RxJS Tutorial: Dive Deep with RxJS Crash Course - kzbin.info/www/bejne/r3vHmWSVe8enoLcsi=qhsqP7Eu3Nd7_hIU

[@MM-ts9jy]

"You will learn once and forever..." I'm now ashamed to admit this is the second time I check this video this week 🤣

[@MonsterlessonsAcademy]

You learned the concept, now you just recheck the code -_-

[@LukeAvedon]

This is the best Angular channel.

[@MonsterlessonsAcademy]

Thank you!

[@ekchills6948]

love this so much exactly what I needed

[@MonsterlessonsAcademy]

Glad you like it!

[@SilvanAngele]

love his tutorials, very good explained always.

[@MonsterlessonsAcademy]

Happy to hear that!

[@KostasOreopoulos]

A nice example to remember is the following:. Imagine that you have a chair to read the "data" of the observable. In switchMap and exchaustMap we have just one chair for the observables to sit as the pass in front of the chair. In switchMap. When an observable passes in front of the chair, the observable sitting on the chair should get up and leave and the new will sit. In the exhaustMap case, if the sit is taken, the observable passing by should leave and all its data are lost. Now concatMap has still one chair reader but has a big hall and keeps observables in the waiting room. in a queue. When an observable completes, the next one takes its place at the chair. MergeMap has many chairs. As the observables arrives at the center, it takes a seat, and we read its data. When it completes, it gets up and leaves, and we publish its data. Not in the order it came. I guess the limits in the number of MergeMap chairs is the same as in PromiseAll.

[@kanha12297]

Awesome tutorial ❤

[@MonsterlessonsAcademy]

Thank you! 😊

[@CodingAbroad]

It sounds like in most cases you probably wouldn’t see a difference between switchMap, mergeMap and concatMap unless your ui had a element such as a select dropdown to quickly change the results and the api being a bit slow

[@MonsterlessonsAcademy]

You will and I showed it in the video. mergeMap won't wait for previous observable to complete and concatMap won't cancel previous api call for example.

[@gabriellavoro1495]

You put out very good content, I've been enjoying your videos.

[@MonsterlessonsAcademy]

Glad to hear it!

[@rhnkashyap]

So, concatMap and switchMap resolves race condition if we are triggering a single API a lot of times and wants the last request's response as final output. RIght?

[@MonsterlessonsAcademy]

Yeap

[@rhnkashyap]

@@MonsterlessonsAcademy Thanks man, huge help.

[@SaadMahimkar]

please wash your teeths

[@raghavendrajyante4200]

Great video..Thank you.. I have a small question. exhaustMap emits the first observable and ignores all subsequent observables until the first one is complete. The question is, What happens once the first observable is completes?? will it ignores the rest of the observables?? or will it emit the next observable after completing the first?

[@MonsterlessonsAcademy]

Why don't you try it yourself? It take 10 seconds to check what the behaivour will be.

[@raghavendrajyante4200]

@@MonsterlessonsAcademy I checked it. It will ignore all subsequent observables. Thank you

[@Georgii1212]

Great tutorial, thanks. In your code, if we write : from([0, 1, 2, 3, 4]) .pipe(operator((x: any) => from(x).pipe(delay(500)))) .subscribe(...) so we suppose we use 'from' operator inside another 'from' operator (instead of "of" as you did). And there is nothing in the console. So why it does not work if we call 'from' inside 'from' ?

[@Georgii1212]

Hopefully, I found the reason. After debugging (error: console.log, inside subscribe), we can see that the error appears inside the statement from(x) above : You provided '0' where a stream was expected. You can provide an Observable, Promise, ReadableStream, Array, AsyncIterable, or Iterable. It would mean that basic type values, such as number or string, are not acceptable as parameters for a 'from' operator. While the 'of' operator accepts them.

[@MonsterlessonsAcademy]

I used from to simulate a stream of data which come with time. You reply is correct operators like switchMap want to get an observable back. Of gives an observable this is why it works

[@phill13able]

I thought I knew RxJS. You showed me otherwise

[@MonsterlessonsAcademy]

Glad to hear that!

[@ghkpr]

lol, yesterday night I searched for monsterlessons academy mergemap flatmap switchmap, and here it is, thanks :D

[@MonsterlessonsAcademy]

Enjoy!

[@waleedsharif618]

What do you think of styling, which one of these should we use in react: mui 5, bootstrap, react styling component, css, tailwind?

[@MonsterlessonsAcademy]

I'm a huge fan of Tailwind. My whole website is build with it without a single CSS line. monsterlessons-academy.com/

[@waleedsharif618]

@@MonsterlessonsAcademy i started to learn tailwind 3 days ago, one question: should we use it in big projects ? In my work im free to choose styling technology, im just wondering to use it or not because html classNames gets too messy, if i have everywhere classNames it looks too much code when using tailwind in html (but its super fast to style compared to other technologies)

[@smitabhagwat-u6j]

Very useful information, Thanks

[@MonsterlessonsAcademy]

Glad it was helpful!

[@hazartilirot1014]

What videos? You point your finger on empty space. There is nothing.

[@qodeninja]

the example here is convoluted, need a simpler setup.

[@MonsterlessonsAcademy]

You can check other examples and then returns here as they are even more complicated. I checked :)

[@qodeninja]

thanks for creating this, just hard to find good resources on RXjs because most of the documentation is outdated or assumes some deep experience with angular, lol. I cant tell you how much time I wasted trying to get operators to work only to realize that they have to be IN pipes, while most examples use them OUTSIDE of pipes. I just need to see basic patterns and there is nothing out there using rx 7 in a clean and concise way that illustrates how to model an application/service.@@MonsterlessonsAcademy

[@brenooandraderox]

That's awesome, thank you for sharing this useful content!

[@MonsterlessonsAcademy]

My pleasure!

[@programmingpurpose1329]

Love your videos mate. You are best in angular ❤

[@MonsterlessonsAcademy]

Thanks a ton!

[@swapnith]

I understood all this concepts of rxjs ,so i am preparing for interviews so this will help me a lot tnx but small confusion still not understood what is diff of mergemap and flatmap, anyhow great job man

[@MonsterlessonsAcademy]

flatMap is an alias for mergeMap. There are no differences.

[@michaelnagatoshi1830]

Fantastic!

[@MonsterlessonsAcademy]

Many thanks!

[@moryaffe7595]

Thanks!

[@MonsterlessonsAcademy]

Thank you so much for your support. It means a lot to me!

[@collectingretrotech]

excellent explanation and example, I don't think anyone could have explained this subject better than what you just did : ) THANK YOU

[@MonsterlessonsAcademy]

Glad it was helpful!

[@maciej12345678]

5:49 so you can use it concatMap if you have array of endpoint it will request each after another

[@MonsterlessonsAcademy]

Yes

[@pauldudley1273]

wooow, I've been struggling with this for a long time trying to find an explination I understand and you broke it down so will wih the delay added in to slow down the function. Fantastic content

[@MonsterlessonsAcademy]

You're very welcome!

[@atmospheric_b]

thank you very much! That`s an ideal tutorial!

[@MonsterlessonsAcademy]

You're welcome!

[@jozefrzadkosz5945]

Which IDE are you using? Sublime?

[@MonsterlessonsAcademy]

It's Vim. kzbin.info/www/bejne/j6Ovmqidec12q80

[@alexx7608]

first one to watch!!!

[@Niks00700]

Thanks for the quality content 👍

[@MonsterlessonsAcademy]

Glad you enjoy it!

[@PhilemonSimona-i6j]

Zboncak Well

[@arielhillel5884]

In which courses do you talk extensively about these topics?

[@MonsterlessonsAcademy]

In none of them. My courses are focused on building production applications.

[@TemporaryTemp-u4e]

Great Explanation. Thank You!!

[@MonsterlessonsAcademy]

Glad it was helpful!

[@MukeshSharma-xd4dn]

Fantastic video.... Many thanks.. Learnt a lot!!!

[@MonsterlessonsAcademy]

Great to hear!

[@qwerty123246]

Thank you buddy! It really helps.

[@MonsterlessonsAcademy]

Glad to hear it!

[@ki9wi]

this channel is gem. you deserve more subs.

[@MonsterlessonsAcademy]

Thanks!

[@維倫劉]

Thanks!

[@MonsterlessonsAcademy]

Welcome!

[@waleedsharif618]

Another question: what do you think of nextjs? Nextjs is for server-side rendering and i know it but cuz nextjs has many good things such as routing, can i use nextjs for client-side rendering ? Is there any difference if i use react for client-side rendering or nextjs?

[@MonsterlessonsAcademy]

it's a stable and prod proven solution. if your app need ssr in react and your app "fits" next js then go for it. But again 90% of frontend apps don't need ssr at all.

[@waleedsharif618]

@@MonsterlessonsAcademy so if i only use nextjs on client side instead of creat react app, its fine ? Any downsides?

[@MonsterlessonsAcademy]

@@waleedsharif618 It makes zero sense then. Just take plain react.

[@waleedsharif618]

@@MonsterlessonsAcademy but if i need to fetch some data from backend, then its good to go for nextjs?

[@John-eq5cd]

@@waleedsharif618 Yes, I have worked on a commercial app using Next.js which can be used for frontend components and also api calls interfacing with Prisma and a PostgreSQL database. It seems to work pretty well.

[@dmitriyobidin6049]

I don't want to sound rude, but making a real world example where all those operators are interchangable have zero educational value...

[@MonsterlessonsAcademy]

First we looked on all methods and understood the differences. I real example I showed the case where 2 methods are interchangable. Not all of them. Because there are cases where different methods can give the same result.