NgRx Signal Store Trilogy, Part 2: The Missing Piece to Signals 

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 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!

Thank you very much Dhaval

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?

You are very welcome!

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!

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.

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 ;)

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 :)

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..

you might want to give a shot. Angular 17 Signals are missing the mutate function but the Signal Store doesn't use them.

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!

Yeah, I absolutely agree but I hope - as you said - that this is just a question of time.

I guess, you've already found my other video on how test Signals, right ;)

@@RainerHahnekamp Yep thanks :)