🚦Angular Signals Game Changer: NgRx Signal State

Angular courses from Beginner to Advanced: angular-university.io
This is quick guided tour to the NgRx Signals Signal State utility. Learn how to create signal state objects using it, and learn how Signal enables fine-grained reactivity in a lightweight way, without any special downsides.
#angular
Timestamps:
0:00 Intro
01:59 Understanding Fine-Grained Reactivity
04:24 How Does Signal State Actually Work?
07:33 NgRx Signal State and Computed Signals
08:18 NgRx Signal State FAQs
Related articles on the Angular University blog:
- Angular Signals: Complete Guide - blog.angular-university.io/an...
Free content at the Angular University:
- 20% of our lessons are free, you don't have to login to watch the lessons. The free lessons are the ones with the P (Pro) - angular-university.io
- Watch the free Angular For Beginners Course - angular-university.io/course/...
Follow me:
Twitter - / angularuniv
Facebook - / angular.university
KZbin - / @angularuniversity
Instagram - / angular.university
LinkedIn - / angular-university
TikTok - / angularuniversity
Threads - www.threads.net/@angular.univ...

[@AngularUniversity]

Let me know if you are planning on adopting NgRx Signal state on your application 😉

[@JohanVrolix]

Perhaps, I'm looking to migrate from NgRx "old" states and stores to the new SignalState and Store for some applications. It seems I still need to have a change of mindset, because it seems there's no longer a need to have actions, effects, reducers and selectors set up? Are there equivalents or should I "forget" the old way when doing the new way with signals. Also, your enthusiasm is infectious.

[@AngularUniversity]

@@JohanVrolix Thank you, it's awesome to hear that 😊There are no actions and reducers as separate concepts. the role of actions is taken by the custom behavior methods, the role of reducers is taken by patchState, and the role of effects can be implemented with a signal effect, and rxMethod for RxJs integration if needed; I think the new way of doing things is much easier, I much prefer it 😊

[@notirondead]

I will adopt NgRx Signals in my future applications with Angular. Thank you for this video !

[@AngularUniversity]

@@notirondead You're welcome, please enjoy the videos and stay tuned for more Angular signals content. 😊

[@Neotrixstdr]

Sure!

[@RooomuG]

I really liked Signal Store. For a final understanding, it would be interesting to show how Signal Store can replace Ngrx Store with an example. Especially, how we can implement an analogue of effects from Ngrx Store. Thanks for your videos!

[@AngularUniversity]

I see what you mean, added to the list of ideas: NgRx Store vs NgRx Signal Store. 👍 The way to do effects in signal store is just by using the effect() signal primitive, so there is nothing specific of signal store, just the generic signals functionality from Angular core. 👍

[@michaellonsdale1248]

Thank you for the help!

[@AngularUniversity]

A huge thank you Michael, please enjoy the videos. 🙏😊

[@ChrisTito-ie3sd]

Your knowledge share are always simple and precised. Thank you Vasco!!!!

[@AngularUniversity]

You're welcome, I'm happy to hear that I try to demystify things and explain them in an approachable way. 😉

[@michaellonsdale1248]

You're the greatest, Vasco. I really appreciate your work, sir.

[@AngularUniversity]

Thank you, please enjoy the videos. 😊

[@baaaanan180]

Great content. I love to see in what direction this channel is heading. Cheers Vasco

[@AngularUniversity]

Thank you, it's awesome to hear that, more videos underway 😉

[@denisowpavel]

WOW! thanks a lot

[@AngularUniversity]

you're welcome, enjoy the video 😉

[@dylanjhalltech8313]

Thanks!

[@AngularUniversity]

Thank you Dylan, please enjoy the channel 😊

[@bartekaszczuk5201]

I also think NgRx Signals has potential. I enjoy managing state with it.

[@AngularUniversity]

Yes, it' has a ton of potential, I think it will be widely adopted in the signals ecosystem, I suspect way more than NgRx Store 😊

[@user-cv9pv2yf3j]

Thank you for this Vasco. I started using NGRX signal store with my modules instead of NGRX store and it has simplified my code.

[@AngularUniversity]

You're welcome, enjoy the new videos 😊 It's so much simpler than NgRx store, isn't it? I really like it too. 😊

[@user-cv9pv2yf3j]

@@AngularUniversityIt truly is.

[@michaelrtan09]

Very informative video! I really like the approach of ngrx signal store and signalState and I really like to use the ngrx signalState to our project app but I'm just a bit hesiitant because its being managed by 3rd party and they might decide one day to stop providing support/update for the library.

[@AngularUniversity]

Hi Michael, I understand the concern 👍, but please don't worry, this is not just any third-party. this is the most widely adopted state management solution in Angular, NgRx. Their members have close ties to the Angular team. It's not going anywhere and it's very well maintained. 😊

[@CecilPhillip]

This is awesome. Thanks for doing this video. So could SignalState get used in a shared service class? I'm wondering if this would be an easier entry point versus setting up a store, and actions, and all of that other stuff.

[@AngularUniversity]

Hello Cecil, thank you, I'm glad you enjoyed it 😊 Yes, correct you don't need a store to use NgRx Signal State, you can use it standalone in a shared service or component, or anywhere else in the code really, without having to create a store with actions and all the other boilerplate surrounding the store pattern. 👍

[@CecilPhillip]

@@AngularUniversity For no so complex apps that need central state management, SignalState + a few Rx operators seems like a good fit.

[@botondvasvari5758]

COOL

[@AngularUniversity]

It is, isn't it? 😉

[@haroldpepete]

i have had to update my angular cli 3 billion of time in the last 2 years to get the most recent angular's version

[@AngularUniversity]

Only twice a year for my courses, but recently way more to cover the release candidates. 😉

[@vOnez212]

Good stuff Vasco. I've been following you for a long time!

[@AngularUniversity]

Thank you, it's awesome to hear that 😊 Please enjoy the videos.😉

[@esdegan7176]

SignalState vs SignalStore when to use when

[@AngularUniversity]

use signal state if you just want deep signals, without the boilerplate of a centralized store solution. Use signal store if you want a centralized store solution that is signal-based. 👍

[@boris8983]

are there still actions / reducers / effects with ngrx signals? patching the state with "patchState" looks more imperative to me and i like the fact, that i am able to trigger an effect and a reducer with the same action.

[@AngularUniversity]

that's a great point, I think I will make a separate video about it. actually reducers have been replaced with patchState calls, that is usually the main responsibility of reducers is to patch the state, right? There is no notion of action, we just call the behavior method on the store. Effects can be implemented via a signal effect, and selectors can be implemented via computed signals, both at the level of the store, at the level of the component, or they can be defined in an external file and reused among components. 👍

[@JakobBjerrePetersen]

What if you take a complex object as an input signal? I guess we're still better of with a custom equal method.

[@AngularUniversity]

That is exactly the case that NgRx Signal State was designed to handle 👍

[@hatsvids]

I just came across a situation where I need to update a nested Status object. The Status object lives in another object, and that object is declared as a signal. When the status is set to a specific value, the UI should disable/remove actions. Two things crossed my mind: What's the best way to update the status value: mutate the StatusId, or spread it into a new object where Status is set to a new object? How am I going to notify all the locations where the main object is used (main page component and two child components)? Then i remembered to check your videos, and here it is! =D but... Is using signalState the default "right" way to do it now? Does the Angular team have something to tackle this in the current/future signal API? I don't want to refactor all the code if there will be a new "official" way to do it.

[@AngularUniversity]

It's a very good question. The signals API either allows us to just declare a state object and update every time a property changes. This does not provide fine-grained reactivity of single object properties, but it's probably OK for the vast majority of cases it should't make a difference, If it does make a different, then you can always split the object properties into different signals. NgRx Signal State is the best solution I found so far for fine-grained reactivity, and the closest to an official solution. 👍

[@AgustinCampon]

Love signalStates, the only downside is that we lose redux tools with this implementation. Do you know if there is any other alternative to not lose the feature to check the actual state of the application from the browser?

[@AngularUniversity]

That's a great point, right now there aren't any but I'm sure there will be.

[@trevormontgomery6795]

Ran into a weird recursion issue with rxmethod. Not sure what's causing it though

[@AngularUniversity]

That's weird, what was the scenario?

[@notirondead]

What is the difference between Signal State and Signal Store in terms of RxJs

[@AngularUniversity]

Great question 👍 The main difference is that the API of NgRx Store is 100% RxJs-based, almost everything is an Observable. With NgRx Signal Store, RxJs is not part of the core API of the store solution. The docs show how to use it using async/await, much simpler. But you still have integration with RxJs via rxMethod, if necessary.

[@notirondead]

Thank you ! @@AngularUniversity

[@user-hs9uf8fg5k]

repeating video...not new

[@AngularUniversity]

it's the first time I cover NgRx Signal State on the channel. The other videos were about NgRx Signal Store. But I think I know what you mean, it's another video about deep signals, just in a different way. So what would you like to see next on the channel?