🚦Angular Signals Game Changer: NgRx Signal State

[@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. 👍

[@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. 😉

[@AbdulazizLadan-x8j]

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

[@AbdulazizLadan-x8j]

@@AngularUniversityIt truly is.

[@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 😉

[@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 😊

[@dylanjhalltech8313]

Thanks!

[@AngularUniversity]

Thank you Dylan, please enjoy the channel 😊

[@rkrao8582]

Interesting actually. So this is how I am planning to do my state management. This is how I set up Using pure signals, ngrx/signals signal state and RxMethod for side effects and keeping my components pure and accessing state from a state file and services are stateless. I would love to have your feedback on this pattern, I believe this will scale to bigger peojects easily but it would be great if you hav any opinion on it

[@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. 😊

[@ddgutierrez]

What use cases does this signalState have? I don't understand the use cases it has. Great Video!

[@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.😉

[@denisowpavel]

WOW! thanks a lot

[@AngularUniversity]

you're welcome, enjoy the video 😉

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

[@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. 👍

[@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. 😉

[@mahboisph]

Would have been nice to know which version you are using here and which version this implementation supports. A lot more angular devs are in v16 and cannot move to 18 yet...

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

[@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. 👍

[@trevormontgomery6795]

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

[@AngularUniversity]

That's weird, what was the scenario?

[@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 👍

[@greekplayback]

Thanks , can you please share code on github ?

[@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

[@botondvasvari5758]

COOL

[@AngularUniversity]

It is, isn't it? 😉

[@4AlexeyR]

Nice explanation. Thanks a lot. I have a question about the "store" concept. I never find good explanation do I need stay all data in a single state object? Or I can or should to use different stores for example for the component data, service data, UI state data? It will be very kindly to master some video about the strategy how to work with "state" or "states" in an app. Thanks in advance. PS: +like, +Subscribe

[@КонстантинХ-у4ф]

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?