Use NGRX DeepSignal instances efficiently in Angular applications

[00:00] When retrieving data from NGRX signal store, you will find out that some of the properties are represented by simple angular signals, whereas some others such as filters property in our case are represented by deep signals. What's a deep signal? Well, it's a technique to improve performance [00:19] for nested objects. Where does the difference come from? So when trying to read the is loading property, NGRX knows that, well, this is just a simple property. So it's not going to wrap it into anything other. It's just going to be a signal. Same with error. Since this is basically [00:40] a plain property, what it's going to do is to represent it as if it was just a signal, nothing specific here. However, filters is represented by an object or in some other cases as a TypeScript record. So what TypeScript is going to do and and your x is going to do is to wrap it with a deep [00:59] signal. So with deep signals, we can do 2 things. Either we can go deeper and read this as if it was just a ordinary signal or yet another deep signal in case of salary property, or try to read the deep signal as a whole. So reading deep signal as a whole is simply invoked [01:19] by calling the deep signal as if it was a function. So let's see how this would look like. So this is the filters. We can see that there is a name, salary, blah, blah, blah. Everything is displayed over here. And the other possibility that we can do right now is that we would go deeper into the [01:39] filters. Now we can see that since filters, that filters deep signal is a function, we can see things like apply, bind, call color, etcetera, and all other properties that exist on all JavaScript functions. But there is also something that is called name and salary, and these are basically the properties that come from the filters objects. So [01:59] they are also represented here. Now, since name is just a plain string, this is going to be simply a signal. So we can call it in just a regular manner, just with angular signals. So this is the one. And another possibility that we can do is to walk into the salary. And since salary [02:18] is not just a property, it's a record. So this means it's an object, yet again, it's going to be a deep signal. So what we can do with this, again, the same as before. Either we read the deep signal as a whole, which we'll see over here, or we can walk down into the object just as we [02:38] did before. So in this case, we've got the from and to properties, and we expect that the from and to properties would be available here. And since from is just a number property, this is going to be just a signal. When working with NGRX signal stores, signals, and deep signals, there is one important thing that [02:58] you should be aware of. Let's take a look at this line and actually this line with the salary deep signal. So in order to walk into the from property, there are actually 2 possibilities. One possibility is that we walk into the signal itself, the plain old signal, and basically to read it directly. But [03:18] another possibility is to do what we have the line above and that we would unwrap the salary deep signal. And since this returns this object, basically walk into the from property. Now they're all going to return the very same value. So there is no difference in whatever is being returned. [03:38] However, there might be a difference in how often would the signal or a deep signal notify that there is a change. So what are the reasons for the from signal to notify its dependence that there was anything being changed? Well, it could be only a new [03:58] value available under this simple number property. However, in case of a deep signal, the whole object or a nested object or a nested nested object, etcetera, is being unwrapped. So basically, for this object, for this signal to notify that something has changed, [04:18] there is a whole record that should change. So all in all, whenever you're dealing with deep signals, it makes more sense to basically go as deep as possible and then to unwrap at the very last moment. Because if we do it this way, if we unwrap plain [04:37] signals, there is less reasons for the signal to notify that there is a change and there are less reasons for effects and computers to re execute. Let's visualize it. So what we have in our store is the items is loading and the error properties, which are simple signals. [04:57] Now filters, since this is an nested object, this is a deep signal. Within the deep signal, there is name, which is just a plain old property with a string value, which is just an ordinary signal. And the salary, which is yet another nested object, which is [05:17] yet again a deep signal, which includes just 2 simple properties with primitive number values from and to. Note that even though an array is an object in JavaScript and TypeScript, NGRX signal store is not going to wrap the items property, which includes [05:37] an array of objects with a deep signal. This will remain just an ordinary angular signal.