Configure Redux-style debugging for NGRX Signal Store

[00:00] So far in order to debug our NGRX signal store, we were using a quick and dirty way to display the state of the store as a JSON object somewhere in the components view. Now let's take a look at a more compelling alternative in a more Redux style, which is called ngrx [00:20] toolkit. So let's start by installing the package from Angular Architects group where the package is called ngrx toolkit. The setup is very simple since all that we need to do is essentially just put one line. So let's walk into the employee store, and somewhere at the top, we can put a [00:39] definition of with dev tools. Now what we need to do in this case, since IntelliJ doesn't want to import it for me, I'll just quickly import it from Angular Architects Njurex toolkit. And the thing that we want to import is called with DevTools. Now with dev tools requires [00:59] us to put just one name string parameter, which is going to denote what is actually our store going to include since we can have multiple stores within a single application. So this is just a name that is going to make it easier in the Redux dev tools to follow [01:19] what is what. Now this is everything that we need, so let's open the Redux dev tools. And what we can see over here is that there has been a store update action that was already dispatched. There is yet another store update action that has been dispatched. What we can see is that we have moved from [01:39] loading true and empty array into loading false and loaded items being defined. So let's see what would happen if we started filtering the data, and let's also put some more data. We can see that the data being defined within the NGRX signal store is being [01:59] updated. So if you want to have more granular control of what is going on within your NGRX signal store, remember that Angular architects have provided a bridge to Redux DevTools.