Map, switchMap, mergeMap, flatMap, concatMap, exhaustMap in RxJS - what is the difference?

in this video you will learn once and forever the differences between all maps inside Eric's chess it is map switch map concat map flat map merge map and exhaust map [Music] and the main problem is here it is really difficult to understand the differences between all these methods you simply open documentation you might understand one method and then you don't understand in what case what method should you use and then you jump to stacker flow to solve your specific problem and you see that people are using different methods for exactly the same solution and then you're wondering okay but doesn't make any sense or difference at all to use some of these methods this is why here is a simple example to understand the differences between all these methods and the first method here is map and actually map is completely different from all other maps and when we're talking about map we simply want to change the source of our stream without usage of subscribe in order to understand map let's create a stream and here what we want to assign we want to use from to create a stream of changed values and let's say here our values in the the stream that are delivered are one two three four five and now we're using map when we really need to mutate every single value of our stream so we're just changing it with pipe and map and here inside our map we're getting access to every single value of our stream which is our item and here we can simply multiply our item for example by 10. in this case inside this stream football Bond got values like one two three four five we will get one multiply 10 2 multiplayer 10 and so on this is why here inside our Constructor I can just subscribe to our stream Foo we subscribe and here let's just console log what we have as you can see in browser we're getting five values 10 20 30 40 50 which actually means we're using map when we need to transform the values of our stream without using subscribe method so it was the most basic map that you can imagine and it is really separated from all other methods now let's look on all other methods that we have and as you can see in order to understand the usage I have here an additional function which is called example and here is our usage we will throw our operator that we want to check inside this function so here we will throw merge map flat map concat maps which map and so on and here we're just calling this function so what this function does we're creating here a new stream 0 1 2 3 4 and after this we're calling inside pipe our operator so here we will have our merge Maps which map or whatever and after this we're just taking this value and we're delaying it with 500 milliseconds and it is important to understand what we will get from it and after this we have our console log with success fail and complete it so first of all let's look on merge map or flat map because essentially flat map is an alias for merge map and it is duplicated inside either xjs so let's look what we're getting in browser I will reload the page and as you can see after 500 milliseconds we directly get all these values inside our console and at the end we're getting merge map completed what does it mean merge map of flat map creates directly observable from our source but it is not killing all existing observables what does it mean here we have our from and this is exactly just a stream and we're subscribing for every single value so from this stream if we will subscribe to it we will get 0 1 2 3 4 without any delay when we're talking about merge map we're saying that this line immediately creates an observable for the value that we are getting and as you can see here we have delay which actually means this command will be executed with delay 500 and actually every single merge map so every single value which are coming from here goes to a directly inside merge map and creates new observable without any delay and it is important to remember that all observables before I keep in alive which actually means here will create an observable for 0 1 2 3 4 and essentially they are all delayed which means they are created instantaneously and we didn't remove all these observables which we have previously this is exactly why we see here one to four and then merge map completed and actually here I can write flat map and it is exactly the same so as you can see in browser I am reloading the page and it works in exactly the same way the next one in our list is concat map this is right here let's try it instead of flat map concat map I'm saving this endless look on browser I'm reloading the patient we're getting 0 1 2 3 4 and actually you could see the delay between every single observable so we're not getting them in immediately we're getting them one by one and then concat map complete which actually means concat map waits for the previous observable to be completed what does it mean here we have zero here we're creating observable from this zero we still a 500 and then the next observable to 1 won't be created until this previous observable is fulfilled then we're waiting for 2 3 4 which essentially means we're using concrete map when you need to create a new observable based on the previous observable but you want to wait for the result of the previous observable merge map on the other hand won't wait for the result now let's try switch map so here I will change it to switch map and let's check what it does I will reload the page and here we directly get 4 and switch map completed why it is working like that essentially here we're creating an observable for every single value here but we got only four why is that because actually switch map cancels every previous observable which actually means here we're creating an observable for zero then for one and here one sees okay we have a previous observable and it will be canceled then this will be canceled this this and then at the end we're getting just a single observable four and the last map that we want to check is called exhaust map so let's try it here exhaust map and check how it works I'm reloading here the page and we see just zero and then exhaust map completed it is happening because all next observables I ignored until observable won't be completed which actually means here we have a first observable for our zero here we're creating it with the delay and then every single time afterwards we're creating a new observable but we can't because we have exhaust map which actually means all these values I ignored because already we have an observable and did exists and now let's look on the example when everything is confusing and the typical thing that you want to implement is fetch some API or some observable and you want to wait for the result and then do one more request in this case here as you can see I have the array of users just to simulate the API and we have two methods get user and get user details and as you can see here we must provide inside method get user details the user which actually means we first of all must fetch our user and then use the details and you will do it in the real application a lot we have code this get user and this is our observable so this is our first API request and after this we're writing pipe and inside concat map and this is completely correct because concat map where using when we want to wait for the result of first observable and then we want to call one more observable this is exactly what we are getting here by getting our user and this is the result of get user and we are providing it inside one more observable and this is this get user details so all this stuff this food dollar if we subscribe here will return for us the user details let's check this out inside browser we're getting id1 and age 30. this is the usage that you typically want to get but here is the problem people will just write instead of concat map switch map and let's check in browser as you can see it is working in exactly the same way and for a lot of people it is really confusing because we are using different function to solve exactly the same problem and just to remind you concat map simply wait for the previous observable but switch map completes the previous observable and creates a new one but essentially for this specific case we don't care if we cancel previous observable because we don't have previous observable if we are talking about HTTP we simply get a single value when this HTTP completes which actually means it doesn't make any difference if we are using switch map or concat map for this specific case it will work the same but obviously not for all cases where you want to have different results with map and actually if you are interested to learn all lyrics Just functions that you must know for everyday use make sure to check this video also

Channel: Monsterlessons Academy

Views: 8,361

Keywords: switchmap, mergemap, flatmap, concatmap, exhaustmap, rxjs

Id: 2zJRw3Cl_Vs

Length: 9min 48sec (588 seconds)

Published: Thu Jan 19 2023