Це відео не доступне.
Перепрошуємо.
RxJs switchMap vs mergeMap - Intro to Flattening Operators (2021)
Вставка
- Опубліковано 18 сер 2024
- 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.decode...
⭐ Angular Material Theming Course (Advanced)
🔗 courses.decode...
⭐ Performant Graphql Backend in 1 Day by Using Hasura Engine
🔗 courses.decode...
🕒 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
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
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" ;)
I want to receive notifications about such videos every day. Thanks alot, perfect job :)!
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
Amazing explanation!!
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 :)
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.
The best video for these topics
Дмитро, спасибо за ролики очень всё понятно, наконец-то разобрался что есть что) Пока что новичёк в RxJS.
Дуже круте пояснення. Дякую!
I love angular, and I really love this channel .. great stuff!
Thank you! :)
Such an awesome explanation. Thanks a lot for this!
Glad you enjoyed it!
Awesome as always ❤️
Thanks a lot!
This is the video that finally made it click for me. Thanks c:
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!
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.
thanks sir , it helps me so much
So helpful and such an amazing way of explaining.
Glad it was helpful!
I'm really surprised that angular and rxjs can do such unbelievable things. It's kinda magic!
Дякую за корисну інформацію !
Really cool explanation with orders, THX!
its so good practical example! :)
this is awesome . Thanks a lot . please continue this series . we want to learn RxJs this way
Thankyou. Great content
I was looking for my issue aboit this couple minutes ago, this notification pops up
Nice man!
You are the best❤
Perfect explanation, thanks!!!
Excellent video. thanks!
You are welcome 🤗
Thank you very much! You make great content! 👍🔥🔥🔥
Gratitude Sir ❤❤❤
It's awesome video!!! Thanks you for that!
thank you
Thanks!
Just noticed your super thanks. Thank you so much for your support! :)
Awesome video!
Awesome video
Thanks 😊
finally the mystery solved between mergeMap and switchMap ^_^
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 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?
Great video! Could you create video about zone in Angular?
You're awesome
It's awesome video!!! Thanks, if possible, make a video about Angular change detection
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.
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 ;)
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
Great! 👍
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.
getting hungry 😉
😁
Давай exhaustMap - менеджер берет деньги со всех , а получает только первый 😂😂
cann you pls share source code!
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
)
я канешна все понимаю, но хотя бы субтитры на русском запилили(((