my-product
's ngOnInit:productId in productIdList
- we are firing this ngOnInit inside our my-product
component. 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 productIdList
change 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.Observable
stream. Doing this is pretty straightforward as the .subscribe()
call returns a data type that we can call .unsubscribe()
on..unsubscribe()
will unhook a member's callbacks listening in on the Observable
stream. When creating an Observable
you 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.unsubscribe
method unless we want to cancel early or our Observable
has a longer lifespan than our subscription. The default behavior of Observable
operators is to dispose of the subscription as soon as .complete()
or .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.CommonModule
.fullProduct
is 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.