- 00:00:02 welcome to this video in this video I
- 00:00:04 want to have a look at the rxjs switch
- 00:00:07 map operator I already had a look at
- 00:00:11 merge map now we're going to see what
- 00:00:13 switch map can do for us it basically is
- 00:00:16 an operator which allows us to trigger
- 00:00:19 some value emissions whenever another
- 00:00:23 observable emits a value not 100% clear
- 00:00:27 let's have a look we'll start with this
- 00:00:30 example and as always you can find a
- 00:00:32 link to that source code in the video
- 00:00:34 description so what we have here is a
- 00:00:37 button which says click me and
- 00:00:39 observable which reacts to click events
- 00:00:42 though we don't subscribe to it so right
- 00:00:44 now obviously if I click the button
- 00:00:46 nothing happens now what I want to do is
- 00:00:49 I want to start an interval so an
- 00:00:53 observable which emits a new value every
- 00:00:56 X seconds let's say every second
- 00:00:58 whenever I click the button but I want
- 00:01:02 that emitting observable that interval
- 00:01:05 to start over when I click the button
- 00:01:07 again so the old emission the old
- 00:01:10 interval should be canceled
- 00:01:12 automatically now why is that useful it
- 00:01:15 might not be that useful if we talk
- 00:01:17 about intervals but it certainly is
- 00:01:19 useful if we think about HTTP requests
- 00:01:22 if you have let's say some Auto
- 00:01:24 completion functionality and you reach
- 00:01:27 out to your server whenever the user
- 00:01:29 type something you don't want these old
- 00:01:32 requests to continue whenever the user
- 00:01:35 changes his opinion you're sending a new
- 00:01:38 request and you want to cancel the old
- 00:01:40 ones you want to cancel the old
- 00:01:41 observables so that you don't have to
- 00:01:44 handle the data which you will
- 00:01:45 eventually come back rxjs will handle
- 00:01:48 that for you and switch map specifically
- 00:01:51 is what helps us with that so let's
- 00:01:53 quickly create a new observable
- 00:01:55 observable – which will do this interval
- 00:01:59 emission which I'm which is that cell
- 00:02:01 every one second this will emit an
- 00:02:03 ascending number and now the easiest way
- 00:02:06 of connecting the two observables is of
- 00:02:09 course to subscribe to the first
- 00:02:11 observable which is emitted on each
- 00:02:13 click
- 00:02:14 and in the first function where we
- 00:02:16 received the value in this case we know
- 00:02:19 it's going to be the click event we
- 00:02:20 could simply reach out to the second
- 00:02:22 observable and subscribe to it too
- 00:02:25 and in the SUBSCRIBE function of this
- 00:02:28 second observable we could now use that
- 00:02:31 value we're getting that ascending
- 00:02:33 number and simply log it to the console
- 00:02:37 if you now open up the developer tools
- 00:02:39 hit control enter
- 00:02:41 clear them and click here we see that
- 00:02:44 the omission of values starts but if I
- 00:02:47 click again you see a second omission
- 00:02:49 started and if I click multiple times
- 00:02:51 our console here goes nuts because we
- 00:02:54 have a lot of observables running
- 00:02:56 emitting values because the old ones
- 00:02:58 aren't canceled now as explained so
- 00:03:01 which map can help us with that so let
- 00:03:04 me quickly hit control enter to stop
- 00:03:06 this nonsense and clear the console and
- 00:03:08 I'm going to get rid of this
- 00:03:10 subscription here instead I'll use the
- 00:03:14 switch map operator which allows me to
- 00:03:17 connect to observables in the way I
- 00:03:19 wanted to connect here so to switch map
- 00:03:22 I basically have to return a function
- 00:03:26 where I still pass the value of the
- 00:03:30 outer observable so of observable one
- 00:03:33 year that's going to be the event still
- 00:03:35 but inside of that body of that function
- 00:03:38 now I'll mark it with curly braces
- 00:03:42 inside of that function body I now have
- 00:03:45 to return the second observable which I
- 00:03:48 want to connect with the first one so
- 00:03:50 here I can return observable two and
- 00:03:54 that basically is all what switch map
- 00:03:57 will now do is it will react to values
- 00:04:00 being emitted on that outer observable
- 00:04:03 observable one year and it will then
- 00:04:06 trigger the inner observable and
- 00:04:08 basically switch the values you could
- 00:04:11 say we won't receive the click events we
- 00:04:14 will receive the values of the inner
- 00:04:15 observable hence the name it switches
- 00:04:18 the values the key thing is that it
- 00:04:21 cancels all all subscriptions
- 00:04:23 automatically if we click this button
- 00:04:25 again so if the outer observable
- 00:04:28 triggered again so if I now hit control
- 00:04:30 enter here and well before that
- 00:04:33 subscribe to that switched observable so
- 00:04:36 after switch map here if I now subscribe
- 00:04:39 here and react to the value by printing
- 00:04:43 it to the console again and now I hit
- 00:04:45 control enter you will see that if we
- 00:04:47 click we still get that interval but if
- 00:04:51 I click again it starts over and the old
- 00:04:54 one is canceled which is why I can click
- 00:04:56 this as often as I want that doesn't
- 00:04:59 change it we don't get this crowded
- 00:05:02 console instead we only have one
- 00:05:04 interval running at a time and as a
- 00:05:06 switch map we switch to values or to
- 00:05:10 observables kind of and we cancel any
- 00:05:13 old ones I hope this was helpful see you
- 00:05:16 in our videos hopefully bye
