Це відео не доступне.
Перепрошуємо.
Map, switchMap, mergeMap, flatMap, concatMap, exhaustMap in RxJS - what is the difference?
Вставка
- Опубліковано 17 сер 2024
- Learn what is the difference between map, switchMap, mergeMap, flatMap, concatMap, exhaustMap in RxJS and what method you should use in what case. Sometimes you see the different methods used for the same case and it is even more confusing.
TIMESTAMPS
0:00 Introduction
0:51 Map RxJS
3:06 MergeMap and FlatMap RxJS
4:55 ConcatMap RxJS
5:55 SwitchMap RxJS
6:37 ExhaustMap RxJS
7:18 Real example
► CHECK MY COURSES - monsterlessons...
FOLLOW ME
► TWITTER - / monster_lessons
This is the best Angular channel.
Thank you!
love his tutorials, very good explained always.
Happy to hear that!
love this so much exactly what I needed
Glad you like it!
lol, yesterday night I searched for monsterlessons academy mergemap flatmap switchmap, and here it is, thanks :D
Enjoy!
this channel is gem. you deserve more subs.
Thanks!
You put out very good content, I've been enjoying your videos.
Glad to hear it!
excellent explanation and example, I don't think anyone could have explained this subject better than what you just did : ) THANK YOU
Glad it was helpful!
Very useful information, Thanks
Glad it was helpful!
Love your videos mate. You are best in angular ❤
Thanks a ton!
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
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.
Fantastic!
Many thanks!
thank you very much! That`s an ideal tutorial!
You're welcome!
Great Explanation. Thank You!!
Glad it was helpful!
That's awesome, thank you for sharing this useful content!
My pleasure!
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
You're very welcome!
Thanks!
Thank you so much for your support. It means a lot to me!
Fantastic video.... Many thanks.. Learnt a lot!!!
Great to hear!
Thanks for the quality content 👍
Glad you enjoy it!
Awesome tutorial ❤
Thank you! 😊
Thank you buddy! It really helps.
Glad to hear it!
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
flatMap is an alias for mergeMap. There are no differences.
5:49 so you can use it concatMap if you have array of endpoint it will request each after another
Yes
"You will learn once and forever..."
I'm now ashamed to admit this is the second time I check this video this week 🤣
You learned the concept, now you just recheck the code -_-
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?
Yeap
@@MonsterlessonsAcademy Thanks man, huge help.
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?
Why don't you try it yourself? It take 10 seconds to check what the behaivour will be.
@@MonsterlessonsAcademy I checked it. It will ignore all subsequent observables. Thank you
What do you think of styling, which one of these should we use in react: mui 5, bootstrap, react styling component, css, tailwind?
I'm a huge fan of Tailwind. My whole website is build with it without a single CSS line.
monsterlessons-academy.com/
@@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)
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' ?
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.
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
I thought I knew RxJS. You showed me otherwise
Glad to hear that!
Which IDE are you using? Sublime?
It's Vim. ua-cam.com/video/YrLiugDhCuk/v-deo.html
In which courses do you talk extensively about these topics?
In none of them. My courses are focused on building production applications.
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?
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.
@@MonsterlessonsAcademy so if i only use nextjs on client side instead of creat react app, its fine ? Any downsides?
@@waleedsharif618 It makes zero sense then. Just take plain react.
@@MonsterlessonsAcademy but if i need to fetch some data from backend, then its good to go for nextjs?
@@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.
first one to watch!!!
the example here is convoluted, need a simpler setup.
You can check other examples and then returns here as they are even more complicated. I checked :)
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
What videos? You point your finger on empty space. There is nothing.
I don't want to sound rude, but making a real world example where all those operators are interchangable have zero educational value...
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.
Thanks!
Welcome!