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🤩
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
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" ;)
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?
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.
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.
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.
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.
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
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 :(
@@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. ^^"
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.
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!
You come make a wealth of UA-cam 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
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 )
Finally I understood difference between switchMap and mergeMap. Thanks!
Wouldn't be a lie if I say this is the best explanation I've seen. Very helpful, thanks!
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🤩
The truth is, this is the best explanation I have ever seen...Thank you
Thanks!
Just noticed your super thanks. Thank you so much for your support! :)
I want to receive notifications about such videos every day. Thanks alot, perfect job :)!
Дуже круте пояснення. Дякую!
Fantastic description. I am so happy that i found you on youtube 🙂
This is was he best possible way to teach these operators. Thank you.
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 :)
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
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" ;)
Дмитро, спасибо за ролики очень всё понятно, наконец-то разобрался что есть что) Пока что новичёк в RxJS.
Дякую за корисну інформацію !
This is the video that finally made it click for me. Thanks c:
I love angular, and I really love this channel .. great stuff!
Thank you! :)
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
Such an awesome explanation. Thanks a lot for this!
Glad you enjoyed it!
The best video for these topics
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!
Awesome as always ❤️
Thanks a lot!
So helpful and such an amazing way of explaining.
Glad it was helpful!
Amazing explanation!!
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?
Really cool explanation with orders, THX!
its so good practical example! :)
I'm really surprised that angular and rxjs can do such unbelievable things. It's kinda magic!
this is awesome . Thanks a lot . please continue this series . we want to learn RxJs this way
You are the best❤
Excellent video. thanks!
You are welcome 🤗
Gratitude Sir ❤❤❤
Perfect explanation, thanks!!!
Nice man!
thanks sir , it helps me so much
Awesome video!
Awesome video
Thanks 😊
Great video! Could you create video about zone in Angular?
It's awesome video!!! Thanks you for that!
How can we prevent API being involked multiple times without using ngrx actions exhaustMap().
Because user press button multiple times often.
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.
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.
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.
thank you
Thankyou. Great content
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.
Thank you very much! You make great content! 👍🔥🔥🔥
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
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 :(
@@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. ^^"
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.
@@DecodedFrontend
Ah great, thanks for clarification! :)
Again great videos, definitely keep it up! 😊
@@rnd_equilibrium Thank you! Glad you liked it ;)
It's awesome video!!! Thanks, if possible, make a video about Angular change detection
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!
Great! 👍
I was looking for my issue aboit this couple minutes ago, this notification pops up
You're awesome
finally the mystery solved between mergeMap and switchMap ^_^
You come make a wealth of UA-cam 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
cann you pls share source code!
getting hungry 😉
😁
Давай exhaustMap - менеджер берет деньги со всех , а получает только первый 😂😂
You make a big mistake letting zip from previous video, it is much harder to see all code....
Dmytro.. from Poland? 😏😏
Almost! From Ukraine :)
Bien pollo crudo
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
)
я канешна все понимаю, но хотя бы субтитры на русском запилили(((