productId in productIdList- we are firing this ngOnInit inside our
my-productcomponent. If there are 10 items in this list, we fire this 10 times, and make 10 subscriptions. Those subscriptions are attached to our source Observable, in this case, our singleton NgRx store (meaning there is one instance shared in our application). If for some reason, those 10 items in
productIdListchange to a brand new 10 items, 10 new subscriptions are added to that store's observable. You can imagine in a situation where we have a very active
productIdList- lets imagine it is attached to a users filtering through a search field - that this could quickly balloon up into large numbers. Our source Observable will believe that it has hundreds or thousands of subscriptions still remaining, because it doesn't know that the component that originally requested it, has disappeared.
Observablestream. Doing this is pretty straightforward as the
.subscribe()call returns a data type that we can call
.unsubscribe()will unhook a member's callbacks listening in on the
Observablestream. When creating an
Observableyou can also return a custom callback,
onUnsubscribe, that will be invoked when a member listening to the stream has unsubscribed. This is useful for any kind of cleanup that must be implemented. If we did not clear the setTimeout then values would still be emitting, but there would be no one listening. To save resources we should stop values from being emitted. An important thing to note is that when you call
.unsubscribe()you are destroying the subscription object that is listening, therefore the on-complete event attached to that subscription object will not get called.
unsubscribemethod unless we want to cancel early or our
Observablehas a longer lifespan than our subscription. The default behavior of
Observableoperators is to dispose of the subscription as soon as
.error()messages are published. Keep in mind that RxJS was designed to be used in a "fire and forget" fashion most of the time.
.subscribe()methods in our component code.
fullProductis updated in the subscription of out select method. If we wanted to unsubscribe using the above mentioned method, we would have this:
[productData]input, and it will update appropriately, whenever the value of our selector changes, keeping the magic of observables intact.