RxJs switchMap vs mergeMap - Intro to Flattening Operators (2021)

In this video, we are going to start learning of flattening operators in #rxjs, namely MergeMap (former FlatMap) and SwitchMap. We will see how data flows in flattening operators and we will visualize it using mental models from real life.
Courses:
⭐ Angular Interview Hacking
🔗 courses.decodedfrontend.io/co...
⭐ Angular Material Theming Course (Advanced)
🔗 courses.decodedfrontend.io/co...
⭐ Performant Graphql Backend in 1 Day by Using Hasura Engine
🔗 courses.decodedfrontend.io/co...
🕒 Time Codes:
00:00:00 - Intro;
00:00:52 - Mental model for mergeMap & switchMap;
00:06:11 - Let's code it!;
00:24:47 - Outro;
#rxjs #angular #webdevelopment

[@stepandemchenko9870]

Finally I understood difference between switchMap and mergeMap. Thanks!

[@THEWilliamchik]

Wouldn't be a lie if I say this is the best explanation I've seen. Very helpful, thanks!

[@abhiramm4941]

Bruh. You are a life saver. I have read 100 articles and seen tonns of videos for understanding the difference between switchMap() and mergeMap(), but none of them explained it butter clear as you😍😍. Especially the real life example of order and chef. That was spot on🤩

[@aleksandrm3466]

I want to receive notifications about such videos every day. Thanks alot, perfect job :)!

[@romanlesko6420]

Дуже круте пояснення. Дякую!

[@ichr]

Another great video! I love this interactive example! Thank you so much! The only problem I have is that I become hungry from minute zero :D

[@antondoit]

Fantastic description. I am so happy that i found you on youtube 🙂

[@HagbardCelineOnRust]

ty for the upload. I constantly fail on rxjs since iam from promiseland. combining streams, taking value from one and put into another and then even determine another return type/interface, really high learning curve

[@DecodedFrontend]

I completely understand you :) I have been in the same boat few a few years ago and for me, it was a very tough time. But I can say for sure that once you get Observables you will be asking yourself "How did I live without Observables before" ;)

[@usmanmuhammad157]

This is was he best possible way to teach these operators. Thank you.

[@balaeinstein8710]

this is awesome . Thanks a lot . please continue this series . we want to learn RxJs this way

[@rakeshbaswaraju5324]

The truth is, this is the best explanation I have ever seen...Thank you

[@nirmalkumar7941]

The best video for these topics

[@fito443434]

I love angular, and I really love this channel .. great stuff!

[@DecodedFrontend]

Thank you! :)

[@hubert.t4243]

I love that you are using the Dürum analogy, it is so much fun to watch. I didn't realised until now that you are actually living in Vienna. Servus :)

[@abhishekrathod982]

Amazing explanation!!

[@balajeebala7810]

Awesome as always ❤️

[@DecodedFrontend]

Thanks a lot!

[@alextiger548]

Nice man!

[@tarasshevchuk8477]

Дякую за корисну інформацію !

[@LidiyaChernomorova]

Really cool explanation with orders, THX!

[@kirilldegtyarev5668]

Дмитро, спасибо за ролики очень всё понятно, наконец-то разобрался что есть что) Пока что новичёк в RxJS.

[@dariooliveira5004]

Perfect explanation, thanks!!!

[@markusingvarsson2146]

Awesome video!

[@pawekoaczynski4505]

This is the video that finally made it click for me. Thanks c:

[@facuabdo]

Such an awesome explanation. Thanks a lot for this!

[@DecodedFrontend]

Glad you enjoyed it!

[@Rob34570]

Took me a while to work out that the Durum chef was making Kebabs (as we down under know them). Greetings from Australia 🙋‍♂️ Your channel is awesome!

[@praktycznewskazowki6733]

its so good practical example! :)

[@Doktornikita]

Thank you very much! You make great content! 👍🔥🔥🔥

[@ariMuayad]

So helpful and such an amazing way of explaining.

[@DecodedFrontend]

Glad it was helpful!

[@mykolastrashok9986]

It's awesome video!!! Thanks you for that!

[@RamKumar-es3mp]

Thankyou. Great content

[@metorado]

You are the best❤

[@mustafasange]

Great! 👍

[@leonbenjamin7891]

Excellent video. thanks!

[@DecodedFrontend]

You are welcome 🤗

[@praecantat1o]

I'm really surprised that angular and rxjs can do such unbelievable things. It's kinda magic!

[@AmarSingh-uw1db]

Gratitude Sir ❤❤❤

[@cangua4462]

thanks sir , it helps me so much

[@jamesquinlan2638]

switchMap works when the second order is from the same customer (who has decided to change his order). The second order requires a very different preparation (with different utensils) and so a second chef is told to prepare it whilst the first chef tidies up his work space.

[@issam9077]

thank you

[@ankitachoudhary716]

You're awesome

[@radvilardian740]

I was looking for my issue aboit this couple minutes ago, this notification pops up

[@beeTechSE]

It's awesome video!!! Thanks, if possible, make a video about Angular change detection

[@RAJU9622]

Awesome video

[@DecodedFrontend]

Thanks 😊

[@alexanderbell7736]

Thanks!

[@DecodedFrontend]

Just noticed your super thanks. Thank you so much for your support! :)

[@Isa-oo8mz]

Great video! Could you create video about zone in Angular?

[@frontend3409]

I came here to make myself ensure about those. I think @ 4:35 you could put two money icons inside mergeMap functions to picture this better. At switchMap example 5:36 i would say that there is only one chef in the kiosk and (because i felt sorry for him, that he got fired xd) he can't do two dishes at once and he throws away the first one in the recycle bin and started to making the dürüm for the guy in the glasses xd TBH, I think if i didn't learn earlier about those types of maps i would get that video, because of complexity of the objects. I would change the order of the names of keys in objects, like { customerId: 1, amount: 2}. Maybe i would do few buttons (one for adding 1 amount of dish, second for making 2 and third for making 3 dürüms). Besides all those things it is a very nice video!

[@oren-karaso]

Great comprehensive stuff as always, tnx! A little question though: at 21:30, according to the example, when you clicked for a new order (2nd customer), and then clicked once on every product, durum was prepared for both customer 1 and 2, even though you only clicked each product once. Is that intentional? Or should we try to modify our logic so one click on every product in this scenario would only advance the product by 1 instead of by 2?

[@AbdullahAMalik07]

finally the mystery solved between mergeMap and switchMap ^_^

[@Afdac247]

You come make a wealth of KZbin videos based on the rxjs operators before you know it you're going to be head of angular project. Also concatMap and exhaustMap are related to these operators as wel

[@kamalmohansinghrana1381]

How can we prevent API being involked multiple times without using ngrx actions exhaustMap(). Because user press button multiple times often.

[@DecodedFrontend]

Why don't you want to use exhaustMap()? It can be a good choice to prevent unnecessary http calls until the active http call completes. Also you can use switchMap if you want to cancel already active API call and fire the new one.. You can also try to use distinctUntilChanged, in some cases it can help to prevent calls if http call params (e.g entity id) has not been changed since previous time. Well, it is hard to say which solution is the best in your case, it very depends on a stream, params, etc.

[@moonstone234]

I cannot find anywhere how does switchMap internally work. Does it unsubscribe inner observable? If so, the word "unsubscribe" should be used to describe its behaviour rather than "completes" because you cannot complete observable, am i right? In that case saying switch map completes inner observable doesn't make sense to me.

[@DecodedFrontend]

Hi Moon, thanks for your feedback! From what I see in the switchMap's source code, it unsubscribes from active inner observable before scheduling the new one. Yes, you are right, probably I misspell it and said "completes" meaning unsubscribing. My mistake, sorry.

[@rnd_equilibrium]

Hay Dmytro! As always great video! But I have some questions. At 16:40 u clicked the buttons, shouldn't there be a value in the corresponding subjects, so if u press the order button shouldn't you get an immediate value out of the delivery stream? 🤔 And also at 23:21 u can see in the array of ingredients that the cabbage1 is left from the previous stream. Isn't that a problem when u zip streams and one of the streams get behind, cause i could imagine if someone uses the zip operator to kinda get streams in sync, u know? I don't know if these questions even makes sense, but they came to my mind. ^^" Oh and also first

[@DecodedFrontend]

HI! Thanks for the feedback :) Regarding you first question: No, we should not get immediately value. It is because streams are lazy and they take values only when you call subscribe method.. before I click "order" mergeMap isn't subscribed to durum$ stream, so all events in this stream are kind of ignored and only when I click "order" button mergeMap subscribes to durum$ stream and starts to receive values from it but only values which are coming after the activation. The second question: It looks like the problem because of global counter... In fact that cabage1 belongs to the second stream (so technically you can treat it as a cabbage 2).. I probably had to reset counters every time the stream completes to avoid miscounting.. Sorry for the inconvenience, my bad :(

[@rnd_equilibrium]

@@DecodedFrontend Ah ye you'r right, because it isn't a BehaviorSubject, so it doesn't get the latest value. My mistake. :D So to clear it for me, the zip operator always keeps the streams 'in sync' or could't it be, that one of the zipped streams gets ahead/behind on a emitted value. I know this is more a question for the other video, but ye, it just thought about it. ^^"

[@DecodedFrontend]

Exactly, it is not a neither BehaviorSubject nor ReplaySubject. And yes, zip operator keeps value emissions kind of in sync. So if you have 3 streams which are counters, with different time interval and which over some time emit values like 0..1...2..3..4... then the output of zip operator will be always like: [0,0,0]... [1,1,1]... [2,2,2]... [3,3,3] ... and so on.

[@rnd_equilibrium]

​@@DecodedFrontend Ah great, thanks for clarification! :) Again great videos, definitely keep it up! 😊

[@DecodedFrontend]

@@rnd_equilibrium Thank you! Glad you liked it ;)

[@codeSurvivor]

getting hungry 😉

[@DecodedFrontend]

😁

[@TymurDaudov_aka_tymfear]

Давай exhaustMap - менеджер берет деньги со всех , а получает только первый 😂😂

[@akshayporwal8802]

cann you pls share source code!

[@haroldpepete]

Bien pollo crudo

[@VolRecon]

Dmytro.. from Poland? 😏😏

[@DecodedFrontend]

Almost! From Ukraine :)

[@valikonen]

You make a big mistake letting zip from previous video, it is much harder to see all code....

[@magneticartist]

Creating too many subjects takes up a lot of memory, just create one as observable: anything = Subject() anything$ = anything.asObservable() and pass an object with the specified type and value {type:"",value:""} anything.next({type:"food", value="bread"}) subscription = anything$.subscribe( object => if( object.type == "bread") do etc... with object.value )

[@Nine_Tails]

я канешна все понимаю, но хотя бы субтитры на русском запилили(((