Thanks you Miklos. It is very similar to first but I tried to take on a different perspective here. namely for users who have no connection to state management and just want to use Signals.
Thanks a lot for yet another great video! With the help from your videos, I was able to migrate my component level signals to app wide Ngrx signal store 🎉
Great, if I might ask, what is the reason that you switched to app-wide (global)? You could have sticked to component level as well. Was there a particular reason?
Thanks, the third and last part of the trilogy will be about the ngrx-toolkit. That's a library we are currently working on and which will bringt devtools support, redux pattern, encapsulation and other features.
thanks for this (and the previous) video about the Signal Store. I think in larger projects I would still prefer the Redux Store, but I am also very attached to the DevTools. I'm wondering if it could become a common way to use the Redux Store for the big picture and use the Signal Store as a sort of facade for individual components only, or if that would be overkill. For example, you could then dispatch load actions in the Signal Store for the component instead of making a service call directly. What do you think?
Hi, so first of all I agree that DevTools and the Redux pattern are feature that I really miss. For DevTools, the NgRx team has decided to wait for the upcoming Signal support in the Angular DevTools. Maybe that will fix it. In terms of Redux, there are no plans to integrate them. As far as I know, one of the main reasons is that Redux is not a feature we see in any of the other modern state management libraries. That being said, I would not use two state management libraries in one project. Even - as you did - if you can say NgRx Global for global state and NgRx Signal for local state. I wouldn't do it. Things are already too complicated. I would and am going all-in on the Signal Store. You might be interested in the upcoming community extension we started. It goes under the name ngrx-toolkit and brings support for devtools, redux and other features. It is still in early beta, but here's the link: github.com/angular-architects/ngrx-toolkit As some kind of teaer, the third part of NgRx Signal Store Trilogy will be about the toolkit. But only once it is stable and ready to use.
I like signal store. The only downside is poor IDE support because of the fancy typescript usage. (e.g. in intellij / webstorm) hope this will be enhanced soon.
How to clear signal store state, e.g. after logout? Is there any built in method or we have to create our own method and use patchState with initial data?
No, there is no built-in method. I would do it exactly as you said, use patchState with the initial data. Of course, you could also come up with an extension like withResettableState(), but that might be an overkill ;)
Nice video, I always learn a lot from your content! Thanks! I have a couple of questions, wouldn't be exactly the same returning undefined than void true in the map operator of the interval? Also, I have heard many times that in declatative programming you should avoid subscriptions. Would there be a way to achieve this in the togglePolling method?
You're absolutely right. I would usually add a takeUntil which unsubscribes, once polling gets back to 0. But it would have required me to come up with a subject and that's why I decided it might overcomplicate things for a video which is about the Signal Store. The alternative would have been to add a filter pipe. It would have checked if polling is enabled or not. So unsubscription would only happen once the service is destroyed. Unfortunately, the filter requires a trigger. Because if - as a user - I click on the button, then polling should start immediately and not with the next interval... also a little bit complicated.. How would you have done it?
@@RainerHahnekampThanks! I'm not sure how I would do it. I think I would create a Subject that is nexted when the polling is activated or deactivated (A Subject). Also I would create a stream that start/stops the interval reacting to that subject emissions. My problem is that I don't know how I would implement this inside the withMethods method, I don't have any experience with ngrx/signals yet..
Hmmm. Can I check the value of a computed() signal in an rxMethod outside of patchState(store, (state) => ...)? In the method passed as 2nd parameter to patchState() the computed signals are available, but what if I only want to patch and make an async call based on the the value of a computed signal?
Yes, in our example that would be the store variable. It provides already everything in the form of a Signal. You just need to call the Signal in order to get its value.
@@RainerHahnekamp Thank you very much for the quick reply, I hope I am not overstretching your help here. In an rxMethod defined in withMethods(((store, ...) => ({ addSomething: rxMethod(pipe(switchMap(id => ...))}) I cannot access computed signal defined with withComputed(). The computed signals are not available on store.* only the primitive store state is in terms of signals.
@@RainerHahnekamp Thanks a lot for the fast reply, I hope I am not overstretching your help. If I define a computed signal in withComputed((store) => ({ mySignal: computed(() => store.myPrimitive * 2 ) })), I cannot see that signal in withMethods((store) => ({ someMethod { /* cannot access store.mySignal */ })
@@beezestyAh, okay I think I see what you mean. Can it be that withComputed comes after withMethods in your example? You have to execute withComputed before then. Let me know if that was the fix.
Is there a way to 'defer' initialization like you can with component store? (Whereby you manually initialize it sometime in the future with "setState")?
Do you mean provide it locally? So, as it is with the component store, that it gets initialized together with the component? I do this in the video at position 22:48. Is this what you meant?
Not so much that (though I do love that you can scope signal store to components). With component store, you can create one without providing an initial state until later(say, after some data is loaded from the server). Selecters etc won't emit until after the store has been initialzed. This allows hardening the store data type by avoiding the need to mark things as "optional" when they're expected to be there after initial load. I get the feeling the answer to my question is "no, you can't, because signals require an initial value" which is totally reasonable :)
Thanks for the video! As always, content is golden. 🙂 I like the composability/extensibility of the SignalStore very much, it was needed long ago.
Thanks you Miklos. It is very similar to first but I tried to take on a different perspective here. namely for users who have no connection to state management and just want to use Signals.
Thanks a lot for yet another great video! With the help from your videos, I was able to migrate my component level signals to app wide Ngrx signal store 🎉
Great, if I might ask, what is the reason that you switched to app-wide (global)? You could have sticked to component level as well. Was there a particular reason?
Simple, clear and precise. Thanks !!!
Thanks again Roland! I see you 👀 my other videos as well 👍
@@RainerHahnekamp Obviously I've been following you for some time. I am really fascinated by your way of delivering lessons. You are a wonderful
That's very nice of you!
Really good overview of Signal Store
Thank you very much Dhaval
Very interesting, hope to see more videos like this.
Thanks, the third and last part of the trilogy will be about the ngrx-toolkit. That's a library we are currently working on and which will bringt devtools support, redux pattern, encapsulation and other features.
@@RainerHahnekamp Sounds great. Thank you for doing such a useful content.
@@OlehBiblyi Very welcome!
Thanks for sharing! 🙏
You are very welcome!
thanks for this (and the previous) video about the Signal Store. I think in larger projects I would still prefer the Redux Store, but I am also very attached to the DevTools. I'm wondering if it could become a common way to use the Redux Store for the big picture and use the Signal Store as a sort of facade for individual components only, or if that would be overkill. For example, you could then dispatch load actions in the Signal Store for the component instead of making a service call directly. What do you think?
Hi, so first of all I agree that DevTools and the Redux pattern are feature that I really miss. For DevTools, the NgRx team has decided to wait for the upcoming Signal support in the Angular DevTools. Maybe that will fix it. In terms of Redux, there are no plans to integrate them. As far as I know, one of the main reasons is that Redux is not a feature we see in any of the other modern state management libraries.
That being said, I would not use two state management libraries in one project. Even - as you did - if you can say NgRx Global for global state and NgRx Signal for local state. I wouldn't do it. Things are already too complicated. I would and am going all-in on the Signal Store.
You might be interested in the upcoming community extension we started. It goes under the name ngrx-toolkit and brings support for devtools, redux and other features. It is still in early beta, but here's the link: github.com/angular-architects/ngrx-toolkit
As some kind of teaer, the third part of NgRx Signal Store Trilogy will be about the toolkit. But only once it is stable and ready to use.
I like signal store. The only downside is poor IDE support because of the fancy typescript usage. (e.g. in intellij / webstorm) hope this will be enhanced soon.
Yeah, I absolutely agree but I hope - as you said - that this is just a question of time.
How to clear signal store state, e.g. after logout? Is there any built in method or we have to create our own method and use patchState with initial data?
No, there is no built-in method. I would do it exactly as you said, use patchState with the initial data.
Of course, you could also come up with an extension like withResettableState(), but that might be an overkill ;)
Nice video, I always learn a lot from your content! Thanks! I have a couple of questions, wouldn't be exactly the same returning undefined than void true in the map operator of the interval? Also, I have heard many times that in declatative programming you should avoid subscriptions. Would there be a way to achieve this in the togglePolling method?
You're absolutely right. I would usually add a takeUntil which unsubscribes, once polling gets back to 0. But it would have required me to come up with a subject and that's why I decided it might overcomplicate things for a video which is about the Signal Store.
The alternative would have been to add a filter pipe. It would have checked if polling is enabled or not. So unsubscription would only happen once the service is destroyed. Unfortunately, the filter requires a trigger. Because if - as a user - I click on the button, then polling should start immediately and not with the next interval... also a little bit complicated..
How would you have done it?
@@RainerHahnekampThanks! I'm not sure how I would do it. I think I would create a Subject that is nexted when the polling is activated or deactivated (A Subject). Also I would create a stream that start/stops the interval reacting to that subject emissions. My problem is that I don't know how I would implement this inside the withMethods method, I don't have any experience with ngrx/signals yet..
Hmmm. Can I check the value of a computed() signal in an rxMethod outside of patchState(store, (state) => ...)? In the method passed as 2nd parameter to patchState() the computed signals are available, but what if I only want to patch and make an async call based on the the value of a computed signal?
Yes, in our example that would be the store variable. It provides already everything in the form of a Signal. You just need to call the Signal in order to get its value.
@@RainerHahnekamp Thank you very much for the quick reply, I hope I am not overstretching your help here. In an rxMethod defined in withMethods(((store, ...) => ({ addSomething: rxMethod(pipe(switchMap(id => ...))}) I cannot access computed signal defined with withComputed(). The computed signals are not available on store.* only the primitive store state is in terms of signals.
@@RainerHahnekamp Thanks a lot for the fast reply, I hope I am not overstretching your help. If I define a computed signal in withComputed((store) => ({ mySignal: computed(() => store.myPrimitive * 2 ) })), I cannot see that signal in withMethods((store) => ({ someMethod { /* cannot access store.mySignal */ })
@@beezestyAh, okay I think I see what you mean. Can it be that withComputed comes after withMethods in your example? You have to execute withComputed before then. Let me know if that was the fix.
@@RainerHahnekamp Oh silly me. Yes that was the fix. Thanks a lot Rainer!
Is there a way to 'defer' initialization like you can with component store? (Whereby you manually initialize it sometime in the future with "setState")?
Do you mean provide it locally? So, as it is with the component store, that it gets initialized together with the component? I do this in the video at position 22:48. Is this what you meant?
Not so much that (though I do love that you can scope signal store to components).
With component store, you can create one without providing an initial state until later(say, after some data is loaded from the server). Selecters etc won't emit until after the store has been initialzed. This allows hardening the store data type by avoiding the need to mark things as "optional" when they're expected to be there after initial load.
I get the feeling the answer to my question is "no, you can't, because signals require an initial value" which is totally reasonable :)
does the recently released stable version work with angular 16? I know this is a long-shot...
you might want to give a shot. Angular 17 Signals are missing the mutate function but the Signal Store doesn't use them.
yet one question remains how do i test signalStores
I guess, you've already found my other video on how test Signals, right ;)
@@RainerHahnekamp Yep thanks :)