switchMap vs concatMap vs mergeMap ... Oh My!

Angular/RxJS Quick Take: Understand the difference between switchMap, concatmap, and mergeMap
00:00 Best practices
00:20 Scenario
00:49 concatMap
03:24 mergeMap
04:59 switchMap
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
😊About Me
Hey! I'm Deborah Kurata
I'm a software developer and KZbin content creator. I speak at conferences such as VS Live and ng-conf. I write articles for freeCodeCamp. And I'm a Pluralsight author with courses in the top 10 most popular (out of 10,000+) over the past 5 years. Courses include: "Angular: Getting Started", "Angular Routing", "RxJS in Angular: Reactive Development" and "Object-Oriented Programming Fundamentals in C#". For my work in support of software developers, I've been recognized with the Microsoft Most Valuable Professional (MVP) award, and I'm a Google Developer Expert (GDE).
View my KZbin content: / @deborah_kurata
Contact me on Twitter: / deborahkurata
Find my Pluralsight courses: www.pluralsight.com/profile/a...
Access my freeCodeCamp articles: www.freecodecamp.org/news/aut...
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
#rxjs #observable #rxjsangular #rxjsinangular #angularrxjs #rxjsoperators #rxjstutorial #kurata #angular #angular_developer #angulartraining #switchmap #mergemap #concatmap

[@luizmiranda9095]

I can't say enough how incredible your teaching is.

[@deborah_kurata]

Wow! Thank you so much!

[@CCPony]

NO ONE can take complex concepts and make them as understandable as Deborah can. No one.

[@deborah_kurata]

Thank you so much for the kind words. You made me smile this morning!

[@MrEltoni12]

Since i started working with Angular, i have always referred to your Pluralsight courses for guidance. Your scenarios and code examples are very clean and you explain things exceptionally well. I will be definitely be adding your videos to the Jr developers i work with.

[@deborah_kurata]

Great to hear! Thank you so much!

[@yunm1824]

oh my. this cleared my confusion on these map stuff for so long!

[@deborah_kurata]

So great to hear that this was helpful. Thank you!

[@mirjana72003]

Your videos are why I bought the Pluralsight subscription. The level of your content is unmatched, thank you so much! 😊 Not to mention you are the reason why I finally can use RxJS 😅

[@deborah_kurata]

Wow, thank you! 😊

[@user-vw8dm9vl7s]

Спасибо Вам большое! Я посмотрел большое количество видео про различия, но не понимал саму суть на реальных ситуациях. Ваши примеры очень помогли понять. Спасибо! ------ Thank you very much! I watched a lot of videos about the differences, but did not understand the essence in real situations. Your examples helped me a lot to understand. Thank you!

[@deborah_kurata]

So glad the video was helpful! 😊

[@coryjseaman44]

Love your material, Deborah, and I frequently recommend your Pluralsight courses to my team. I asked ChatGPT for a good analogy for the higher-order operators, and I liked the response: > concatMap is like a waiter who serves your dishes one by one in the order they are received, never jumping ahead to serve another dish before the current one is finished. > mergeMap is like a server who brings out all your dishes at once, regardless of what order they were received in. > switchMap is like a head chef who oversees multiple tables and ensures that the kitchen only prepares and serves the dishes for the table that is currently being attended to, discarding any previous dishes that were being prepared for other tables.

[@deborah_kurata]

Thank you so much for the kind words! Great ChatGPT answer! It's amazing that it can do something as complex as a metaphor. And it's correct. And consistent. Very cool! I was using it for some Git commands last night and it was really good at remembering my repo and branch names in between different questions. Fun stuff!

[@alexpappas610]

For switchMaps it's important to note that if you're thinking of http requests, the requests are already done and they are not literally cancelled but the observable just ignores the response of those "cancelled" ones and does not emit the values.

[@khadkasubarnabijaya]

So far the best explanation on this topic for me!😀

[@deborah_kurata]

Awesome, thank you! Glad it was helpful!

[@juliorodriguez4946]

Best explanation ever! I'm glad I found you on KZbin! :)

[@deborah_kurata]

Thank you so much!

[@stefanotrivellin5939]

Beautiful and clean explaination, thank you!

[@deborah_kurata]

Thank you!

[@barhate_gm]

Perfect 🤩

[@deborah_kurata]

Thanks!

[@respostasimples]

you're doing the gods work, thanks!

[@deborah_kurata]

☺ Great to hear that its useful!

[@elayamaransekar3790]

As someone here has commented out, I started learning Angular watching your videos. I like the way you explain each concepts clearly with examples. I wish to see lot of advanced latest topics. Thanks once again.

[@deborah_kurata]

Thank you so much! I appreciate it! Have you seen the videos on standalone components and the new signals features?

[@abdelrahmanamer157]

well explained, smooth and easy examples 👏👏 Keep it up @deborah 🙌

[@deborah_kurata]

Thank you! 😃

[@devxbasit]

This is the best explanation I have ever watched, irrespective of the topic or programming language.

[@deborah_kurata]

Wow! That is so great to hear. Thank you! 🙏🏼

[@purushottamgupta2950]

Mam, you are a legend. This explanation is so good, I can now recall this in mid sleep !

[@deborah_kurata]

😊 Glad it was helpful! All the best!

[@user-nc6ho6dj3i]

Thank you so much, I really appreciate it :)

[@deborah_kurata]

Thanks! 😊

[@omphemetsemafoko830]

Your explanation sis very clear and precise to the point. After watching your video, a lot of confusion has been cleared on my mind based on your explanation. Thank you and God bless you.

[@deborah_kurata]

Glad it was helpful! Thank you for watching!

[@carlosvillegas33]

Thanks Deborah for share your knowledge It helfull me. 💪

[@deborah_kurata]

Glad it was helpful! Thank you for watching!

[@ilgul9177]

Thank you for the brilliant explication of this different maps. English is not my native language, but understood all clearly.

[@deborah_kurata]

Great to hear that the video was clear and helpful!

[@metric152]

This was fantastic. I tend to use switchMap for requests but haven’t needed the others yet. Good to know how they work.

[@deborah_kurata]

Thank you! Glad it was helpful!

[@abnow1998]

Great explanation!🙌

[@deborah_kurata]

Glad you liked it! Thanks!

[@PotensElit]

simplicity is the best way to teach .. thanks!👍

[@deborah_kurata]

Thank you for watching!

[@emreaka3965]

thank you

[@deborah_kurata]

Thanks for watching!

[@dextrusdalabassistan]

Thanks for this, it answered a problem was having where I was performing multiple http get requests but only seeing a single response, i.e using switchMap when I should have used concatmap or mergemap!

[@deborah_kurata]

So glad to hear it was helpfu!😊

[@alexle7895]

concatMap = Relay race (brilliant example). For people with English as a second language, the analogy is perfect.

[@deborah_kurata]

So great to hear the analogy works! Thank you!

[@Amandeepsingh-tj9oj]

Best video ever!!

[@deborah_kurata]

Wow! What a wonderful complement! Thank you!

[@carolruo]

Best teacher, please do more videos on Angular

[@deborah_kurata]

Thank you for the kinds words! And will do! Any particular topics?

[@carolruo]

@@deborah_kurata I''m currently learning more about interceptors and authentication process. Since I'm an intern, any topic from an expert is of great help, I like to understand how stuff really works

[@ErShikharChauhan]

nice Video! this could have include exhaustMap as the last example when we need just first emitted value and ignore all subsequent requests.

[@deborah_kurata]

Glad to hear you liked the video. Yeah, I've considered adding exhaustMap, but wasn't sure it was a common use case. Could you share the scenarios where you find it most useful?

[@ali-13392]

Hey Deborah! Thanks for the video. I'm still learning reactive development and had a question. In my previous approach, what I would have done, is to add [(ngModel)] or form control to the dropdown, then add "onChange" event on the dropdown, and pass the "userId" from there to a function in component. Then, used that to call http get and retrieve the "Todo" list. I know this is not reactive, but is that still a bad approach? Wanted to know what you think? Thanks!

[@deborah_kurata]

Thank you for watching! There is nothing wrong with your current approach. It just doesn't get the benefits that a reactive approach has (which may or may not be applicable to your scenario). With a reactive approach, it's easier to combine streams because you have the stream in a variable you can reference, for example. But many of these approaches will be changing further as more as more signal features are implemented. It will be interesting to see how signals affect our common scenarios.

[@jeffnikelson5824]

You are the best thanks a lot for the content deborah hope there is more to come if I can give some Feedback: You could try to present more compact and make your videos slightly shorter ❤️

[@deborah_kurata]

Thank you for the kind words and the feedback. Most of my recently posted videos have been a bit shorter. (See this: kzbin.info/aero/PLErOmyzRKOCqaSzFo5A3Og1ZiFo0ZR0gB) In this one, I wanted to cover each of the three operators in one video to compare them, so it got a bit longer. Do you think doing 3 shorter videos ... one for each operator ... would have been better? Any specific suggestions for how I could have made it more compact? Thanks again!

[@kevintale2608]

Best explanations I've seen so far about xxxMap! So in short, switchMap cancels the inner observable if the outer emits before the inner completes, right? But what does that mean to "cancel" an observable exactly? I know that it will cancel the http call, is that what canlelling means or it would apply for any type of inner obs (not http calls requests only)? Thanks Deborah !

[@deborah_kurata]

Thank you! Yes, you are correct. I assume what it means for other types of Observable depends on the Observable? For example, for a synchronous Observable, a$ = of(1, 2, 3), the values are emitted synchronously so there isn't an opportunity to cancel them.

[@R80onaldinho]

Thank you for explanation , can you make a videos of creating a real world project from scratch using reactive programming Thank you again

[@deborah_kurata]

Thanks for the idea!

[@Tyler.Durden]

Have you considered uploading your amazing knowledge to Udemy vs plural?

[@deborah_kurata]

So kind of you to say that the info is amazing. Thank you! I tried Udemy about 2 months ago. I was not able to get approved as an instructor on Udemy. I couldn't get past their automated "author verification" system. I have no idea how to get in touch with a person ... so I have been posting here instead. I'm open to any other suggestions ... :-)

[@nhieljeff2156]

you sound like glados, i love glados

[@deborah_kurata]

I shed tears every time I hear that.

[@jayakumar2927]

can you share github link

[@deborah_kurata]

I have a GitHub repo here: github.com/DeborahK/Angular-Posts But it doesn't demonstrate the difference between switchMap, mergeMap and concatMap. But it does show the switchMap in action. Hope that helps.

[@samsondavidoff372]

What is userSelectedAction$? I don’t understand it 🫤

[@deborah_kurata]

this.userSelectedAction$ is the Observable part of a Subject. For more context, consider watching this video: kzbin.info/www/bejne/mKKsm2CjbLqrsM0 It is longer, but covers a more complete look at using a Subject to respond to a user action. Let me know if that helps. Feel free to post additional questions.