Disposing#
Some event handlers and especially the store environment need a proper removing of handlers. This happens in the dispose
method you can override in the component. The @Dispose
decorator is provided by the base library in @nyaf/lib. It will be triggered by the lifecycle event and is independent of the store infrastructure.
Using Dispose with Store#
This is how it looks like:
constructor() {
super();
this.tabSubscriber = this.store.subscribe('tab', (data: globalStoreType) => {
document.querySelector<SlotTabsComponent>('#demoTabs')?.setTab(data.tab);
});
this.tabSubscriberCheckRemoving = this.store.subscribe('tab', (data: globalStoreType) => {
console.log('Tab Subscriber received change from store');
});
}
store: Store<globalStoreType>;
dispose() {
if (this.tabSubscriber) {
this.tabSubscriber.remove();
}
if (this.tabSubscriberCheckRemoving) {
this.tabSubscriberCheckRemoving.remove();
}
}
Even easier is the usage of the Dispose
decorator like this:
@Dispose(s => s.remove()) private readonly tabSubscriber;
@Dispose(s => s.remove()) private readonly tabSubscriberCheckRemoving;
You can now remove the dispose
method entirely. The variable s in the example code is the current property the decorator is placed on (tabSubscriber or tabSubscriberCheckRemoving). The call convention depends on the object the property returns. There is no error handling internally, the code is executed "as is".
General Usage#
The @Dispose
decorator is defined in the base library and not limited to store actions. The callback function has access to the current property and can execute anything on behalf of it.