Coding

RxJS SUBJECT (~EventEmitter) | RxJS TUTORIAL

  • 00:00:01 welcome to this video now maybe you know
  • 00:00:04 about our ex chairs and observables and
  • 00:00:06 maybe you already created your own
  • 00:00:08 observables and worked with them a bit
  • 00:00:10 you might have noticed that observables
  • 00:00:12 are kind of passive you wrap then you
  • 00:00:16 wrap an HTTP request
  • 00:00:18 you can't trigger the emission of a new
  • 00:00:21 value manually now having that passive
  • 00:00:24 approach might not be what you need in
  • 00:00:26 some cases maybe you want to be able to
  • 00:00:29 emit a new value manually so you want to
  • 00:00:33 use that observable like an event
  • 00:00:34 emitter where you in your code control
  • 00:00:37 then a new value is emitted we can do
  • 00:00:40 this with something which is called a
  • 00:00:41 subject it inherits from the observable
  • 00:00:44 but there we can also call the next
  • 00:00:47 method manually to force it to emit a
  • 00:00:51 new value and therefore we can have a
  • 00:00:54 more active approach of using
  • 00:00:55 observables with subjects now that
  • 00:00:58 doesn't mean that you should always use
  • 00:00:59 subjects just use them if you need to
  • 00:01:02 use something like an event emitter
  • 00:01:03 let's see this in action in jsfiddle I'm
  • 00:01:07 in J's fellow here and all I did is add
  • 00:01:10 an import to the CDN link of rx chairs
  • 00:01:12 which you can find on the official page
  • 00:01:14 at the very bottom make sure to pick the
  • 00:01:16 right version there and here I now want
  • 00:01:18 to create a subject so I can create a
  • 00:01:21 new subject stored in a variable named
  • 00:01:23 subject the name is up to you though and
  • 00:01:25 I use rx
  • 00:01:26 subject however unlike the observable I
  • 00:01:30 now don't call a helper method like
  • 00:01:32 create instead I simply instantiate this
  • 00:01:36 object with the new keyword it basically
  • 00:01:39 is just a constructor now that's my
  • 00:01:41 subject which I can use like an event
  • 00:01:43 emitter now I can set up my observers
  • 00:01:45 but I can save some time by using the
  • 00:01:48 subject like this calling the SUBSCRIBE
  • 00:01:51 method and cue this method I can now
  • 00:01:55 either simply pass an object which has
  • 00:01:57 the next error and complete method and
  • 00:01:59 observer may have or just a list of
  • 00:02:02 these methods so here I will pass a
  • 00:02:04 JavaScript object will call the next
  • 00:02:07 method like this and I know here we'll
  • 00:02:10 get a value and this value well for now
  • 00:02:13 I just want to log it to
  • 00:02:15 console and I will also call or add
  • 00:02:18 arrow function or function excuse me
  • 00:02:20 where I will log any error to the
  • 00:02:23 console like this console log error and
  • 00:02:29 finally what about complete let's add
  • 00:02:32 this to complete this function console
  • 00:02:36 log oops completed now to demonstrate
  • 00:02:42 how this works I'll add more than one
  • 00:02:44 subscription because the great thing
  • 00:02:46 about event emitters is that we could
  • 00:02:47 trigger it from one place in code and
  • 00:02:50 then react to that event in multiple
  • 00:02:53 places so we typically have more than
  • 00:02:55 one subscriber so here I will also
  • 00:02:57 subscribe I don't use complete and error
  • 00:03:00 here to keep it a bit shorter though I
  • 00:03:01 just have next in this subscription now
  • 00:03:04 with that I can add some code below that
  • 00:03:06 where I call subject next keep in mind
  • 00:03:08 subject is the subject I created and now
  • 00:03:10 I can actively call next and emit a new
  • 00:03:15 data piece something like that if I hit
  • 00:03:19 control enter you see a new data piece
  • 00:03:21 twice which makes sense because I have
  • 00:03:23 two subscriptions which both incorporate
  • 00:03:26 the next function if I also call subject
  • 00:03:30 air or air or here you see or maybe
  • 00:03:35 let's clear this you see a new data bees
  • 00:03:39 twice and then error and then the
  • 00:03:41 uncalled error because the second
  • 00:03:42 subscription here doesn't handle the
  • 00:03:44 error case so that is how I can call
  • 00:03:47 error and of course I could also call
  • 00:03:49 complete and don't pass any data here so
  • 00:03:52 let's clear this head control hit
  • 00:03:55 control enter and we see complete and
  • 00:03:56 there we only handle this in the first
  • 00:03:58 observable so it only gets printed once
  • 00:04:01 now that is how we can use a subject and
  • 00:04:04 of course we could call this code in any
  • 00:04:06 other place we could call it once you
  • 00:04:08 click the button we could call it after
  • 00:04:11 timeout finished whatever fits your
  • 00:04:14 needs you decide when you emit a new
  • 00:04:17 value or error or completion with a
  • 00:04:20 subject as a side note if you did