Computed, Methods, & Hooks

[00:00:00]
>> Alex Okrushko: So now, say somewhere in our, for example, event details. Right now it's provided in root, so we can directly inject where we want. So let's say we inject this, provide private read only bookstore. Inject Bookstore. Now, from this bookstore, and show you what we have. We have the bookstore, books available, and this will be a signal, right? We have books available for us.

[00:00:45]
We have books available. We have free books available for us, which is a computed state. We have other computed states, which is total books, right? They're all available for us here. Or we can add a book as well. Bookstore, add a book, and just to pass the book for it, which is like ID one, for example, title, a book, and price zero. Right, so what does Signal Store do?

[00:01:31]
It allows us to encapsulate the state, split it into what the state is, what the source of truth for that state is, right? Our books is the source of truth. It's taking care of the books state. Then we can have some derived values out of this. It also has that and the methods how to operate on that state. So it allows us to combine all those things together and encapsulate.

[00:02:01]
If you look at our card service, it kind of does similar things, right? It injects certain things, but it's not grouping anything. We have this as our state. This is our computed, which is derived, and this is how we operate on the state, right? So Signal Store allows us to group things together and encapsulate and group them properly. I'm going to show you a few more things that it can do.

[00:02:30]
Oh, by the way, see these features? They are basically rolling into each other, and with each next method, more and more things are available for you here. So you can see here, my store not only has books from here, but it has the free books and total books from my computed. Right, you see it. At this point, my store only has books available to it because at this point it has nothing.

[00:03:02]
So that's why we first declared the state that we're working with, then we have some derived state, and then we add methods on top of it. I'm going to show you one more really cool trick here. There's another building block for Signal Stores called with hooks, and it allows us to operate on the lifecycle hooks of the component, or right now we're providing in root, so it's basically when this first thing is injected, it's going to act here.

[00:03:45]
For example, it can have on init and on destroy. So, for example, on init, I can actually inject over here as well. And store, we have all the things available for us, so we can do some additional logic on it and on destroy if we want to. Again, the cool part about it, you don't have to provide things in root. You can provide this bookstore at specific levels of your component tree, and that would be tied to the lifecycle of that component.

[00:04:26]
You can replace, I mean, tab state is fairly straightforward, but it's basically with state of active tab and with method of active. So you can, but again, this is very simple, straightforward. The beauty here is this: it now takes ownership of that state, like that's the source of truth for this, and just like a tab state, it could be injected as well in the tab group component.

[00:05:01]
Right, so we'll have multiple stores, tab stores for that. In a typical application that uses Signal Stores, there'll be quite a few of the stores that are provided in root, and they are taking care of the state. They will talk to the services. I'm going to show this in a second, how you can talk to the services. Services call HTTP client, right, and call those requests, either update or get or remove, delete, all those things.

[00:05:39]
But services become stateless. They really just wrap HTTP client. The stores themselves now keep track of the state. They become source of truth for the state, and they could be injected further down the components that could be reading that state or requesting certain things from them. That's not it. There'll be more architectural things, just let me get to that.

[00:06:05]
So that is the Signal Store basics. This is four building blocks. I can show you how we can do it. I'm going to show it in a second when we will be actually implementing this. Does Signal Store work with the Redux dev tools? Does Signal Store work with the Redux dev tools? The answer is yes. There's a custom plugin, which I'm going to talk about plugins literally in the next thing, but there's a custom plugin that can sync that for the Redux dev tools.

[00:06:44]
Chat Signal Stores in production. Yes, Signal Store has been in production for the last two years, I'd say, maybe one and a half, two years, yes. The NgRx team and the Angular team have been very closely communicating all these years, especially even before Angular team came up with the signals when they were in the exploration stage. They reached out to NgRx team and said, hey, what do you think?

[00:07:09]
We're looking for a new reactive primitive that's simpler than observable. So we've been talking for a long time, and we've been getting this Signal Store ready in the meantime as well. Marko Stanimirović and Mirek from our team is the main author of this, spent hundreds and hundreds of hours on this thing. So he took the Component Store that predated without the inject and all those things and made this 100% very composable, highly customizable thing.

[00:07:52]
Yes, so it is in production. Great question, and a lot of this, the usage is skyrocketing. It's exponential. The last time I checked, it was like 350,000 weekly downloads and growing really, really fast. It is now the second most popular state management library for Angular, only trailing behind the global store, just because it was basically in every app as well.

[00:08:24]
We recommend to use Signal Store as default state management app now from NgRx team. And yeah, just getting back, we just had the NG Poland 2025 recently, where it's a conference in Poland. Big, one of the biggest ones in Europe, over 1,000 attendees, and a lot of folks from NgRx, from Angular team also coming. Pawel, Alex were also there, and after the conference there's Q&A, and they were asking the team, hey, do you plan to create your own state management library?

[00:09:03]
And Alex said, no, no, there's a Signal Store already. Go for it, right? So it's been always, and the good thing, NgRx itself has proven over the years that it goes in line with Angular as well. So Angular just released 21. NgRx 21 will be also released within the next few weeks. So we usually within a month, we try to release as well, and we guarantee version to version compatibility.

[00:09:36]
Could you give a hint how these arguments interact with types, like what the TypeScript primitive is for that? Yes, so depending which ones exactly, this is 100% type safe, and there's the strictest form possible. So you can see the book here. The store has the signals. They're all there. It has some hidden things as well. But yes, it's 100% type safe. It provides even more advanced things, then again, I just won't have the time to go over today.

[00:10:15]
But yes, it's 100% type safe. Moreover, so let me see. If you're really, for example, do not want to expose the books to the outside world, for example, it's like a really internal state. Only computed you can read through computed. You can just do the prefix. And then you'll need to prefix everything, of course, and then it's available only within the store itself, and then there's nothing.

[00:10:45]
Yeah, probably books was a bad idea. And then you can see here in the event details, books are not available. So it's not even the underscore. It just stripped out completely. So there's a lot of tricks with this, but I want to give you just the main idea of how to work with Signal Stores. And again, it's almost irreplaceable part of many enterprise applications.

[00:11:07]
Yes, you can do a lot with like service with the subject, but not with the signal approach. You cannot control race conditions easily. I'm going to show you how to do it really nice with the Signal Store.