Coding

switchMap() | RxJS TUTORIAL

  • 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