Configure lifecycle hooks for an NGRX Signal Store using withHooks
Use lifecycle hooks in the NGRX signal store to manage your store's state when it's initialized and destroyed.
In this example, you'll see how we can use the onInit hook to load a list of employees when the store is initialized with its associated component.
[00:00] Sometimes we want to enhance our ngrx signal store with defining its own life cycle hooks, similar as components do. So in our case, the employee listing components is quite weird since there is no data loading initially, as we can see. And the user is supposed to first click [00:20] the reload button for any data loading to proceed at all, which is not a very good behavior for the user. So for this reason, sometimes you will need to import the with hooks yet again from n g r x signal store, which is yet another feature of the n g r x signal [00:39] store. This one will allow us to provide the 2 hooks, either the on init or the ondestroy. Both have the access to the store. So let's define both. First, the on init and then the on destroy. So first, let's see how do they behave. So [00:59] first, we will have the in it within the on in it and they destroy. So when they are initialized or when they destroy, this relies on when the injector will be asked to actually create an instance of the store. So let's walk back into [01:19] the home tab, and let's open the console. Let's reload the application. So when we are inside the home, so the routing for the employees haven't been triggered, the employee page or employee listing component haven't been executed. So there was essentially no need for [01:39] this employee store instance to be created, especially that this instance haven't been provided in root. So only when we walk into the employees. Now the route has been activated. But again, if we take a look at the app routes, the provider is not on the routing level. In our [01:58] case, the provider is on the employee page component level. So this component gets displayed. It will include the child employee listing. And for this reason, we can see the init being displayed in the console. Now we can figure [02:18] out when the destroy is being executed. So since the employee store is provided within this component, it's a matter of this component being destroyed so that we can see that the store is going to be destroyed along with the injector of this component. So let's basically walk out and we can see that, [02:38] yes, destroy is being displayed. So bear in mind what is the area of availability of your store, where you provide it, and where you inject it. Now what we want to do, essentially, is that our store needs to load the employees initially [02:58] because this is the expected behavior. So let's open the network tab and let's walk into the employees. We can see that initially the data loading is there, but also when we click the reloads, then subsequent reloads also work correctly.