A Redux-like Pattern for Managing State with Angular signals

Now that Angular signals have been out for a while, there are patterns emerging.

In this video, we'll walk through one such pattern for managing state with signals. This Redux-like pattern leverages the best of signals and RxJS.

*Links*

*Special Thanks*
🌟 To Jason Warner for an early code review.
🌟 To Freddy Montes for reviewing the code prior to publication.

*Content*
00:00 Redux-like pattern
00:20 Sample application
01:38 Define the state
02:23 Set the initial state
03:09 Define the selectors
04:16 Identify the actions
04:56 Define a Subject
05:55 Creating the Observable pipeline
08:59 Defining reducers
12:30 Accessing state from the component
12:48 Kicking off actions from the component
13:35 Following the pattern (again)
16:13 Modifying the component
17:13 Wrap up

▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
😊About Me
Hey! I'm Deborah Kurata
I'm a software developer and YouTube content creator. I speak at conferences such as VSLive and ng-conf. I write articles for freeCodeCamp. And I'm a Pluralsight author with courses in the top 10 most popular (out of 7,000+) for over 5 years. For my work in support of software developers, I've been recognized with the Microsoft Most Valuable Professional (MVP) award, and I'm a Google Developer Expert (GDE).

▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
#angular
#angularsignals
#angularstatemanagementwithsignals
#rxjs
#rxjsandsignals
#signalsandrxjs
#angularstatemanagement
#angulartutorials
#statemanagement
#angularwithredux
#angularstatemanagementtutorial
#angularforbeginners
#statemanagementinangular
#angularredux
#angularstatemanagementbestpractices

[DiogoFaFab]

Your channel is a hidden gem! I love how you explain Angular. Thanks a lot for sharing such valuable content!

[patrickcameron]

So happy I found this channel. You are a fantastic programmer and teacher and you've greatly helped me improve my Angular skills.

[advance]

Marvelous! You know I’m so thrilled that I came across your channel. I’m sure you help many devs to refresh previous knowledge and polish up our skills. Keep it up!

[patrickcameron]

I'm so happy I stumbled across this channel. You are a fantastic programmer and teacher. Thank you for making these videos!

[turboheadcrab]

I love seeing new Angular Signals content. Looking forward to more pattern videos from you and completely zoneless approaches from the Angular dev team after they are done with Signal based forms.

Thank you for what you do!

[codeSurvivor]

I really like this pattern, thanks for the video. Kudos to Josh Morony for creating it for Angular, as far as I know.. It would have been nice to mention that somewhere. The way you apply it, is nice but in a way you kind of break the pattern when using the filteredTodos computed signal instead of defining an action explicitly, IMO

Also I prefer not using tap, and define derived streams and subscribe to them, to be more compliant with the flux pattern in which you change the state at the end of an action

[HealmaTech]

I like it raw, and this is one of the best!

[AnthonyDev]

I like to use state pattern, specially with Flutter, but now I can use it with Angular! I'm waiting for the next videos! Thanks, Deborah!

[tiberseptim]

Thanks for the video.
I noticed several problems:
1. Subscription in Root service is unti-pattern, cause it will live forever.
2. You need to complete subjects always in onDestroy.
Anyway, looking at all this boilerplate, one thinks hard before implementing ngrx-like store. Usually you don't need it at all )

[Hunter-bs]

Fantastic work, Deborah Kurata! Thank you for these videos that help us take our skills to the next level. I was hoping you could make a video discussing when, where, and why to use access modifiers like private, readonly, and protected in an Angular web app. If you have any references on this topic, that would be greatly appreciated. Thanks!

[fmontes]

Love this approach! Redux-like for the win!

[ythalorossy]

It is amazing.... I was doing something similar without thinking about patterns.
I need to review all my code and adjust to this pattern.

[flywheel]

I like your approach of illustrating cognates to the familiar NGRX pattern. I hope you'll soon do the same in relation to the new SignalStore.

[Matrium]

Great explanation, even when I am not a fan of the Redux pattern. Though if you are absolutely set to implement the pattern, this is a very clean way and readable way to do it, with not that much boilerplate. So at least it helps (at least a little bit) with my two biggest concerns with NgRx: readability/maintainability and high-code-cost.

[KushanShanuka]

great tute, im really interesting about this, and now im waiting for the state update feature,
by the way thanks a lot for sharing deborah

[juliojimenez]

Another great video that is no longer a surprise! What a wonderful series on angular signals!

My dream would be a medium-high level course on developing a real project in Angular 18! 😄

If one day you do it don't doubt that I will be the first to buy it! Keep it up!😉

[DraaElMizan]

Thanks for Sharing Deborah. Another great tut.

[richarddefortune]

Great video (as usually). I love the patterns you added to mimic "selectors". I didn't like the way it's presented in the NGRX documentation, where the store is accessible on the HTML template.

If you haven't recorded the next video yet, is there a way to talk a little more about the store itself and concepts, such as initialValue, withMethods, withComputed, rxjMethod<T>(), and so forth.

I'm glad you recorded this video as I was trying to understand NGRX store by reading the documentation. After watching your video, I will write a small project.

Thank you so much.

[alexpappas]

If I understand correctly, this is more of the bare flux pattern. I believe in redux, actions should have unique keys which will be used on dispatchers and reducers will use with switch case statements. I'm not entirely sure though but I am assuming that it's this way so that there can a be a tooling built around the pattern for debugging/time-traveling. Redux is also typically done with a single store to hold all application states whereas Flux can have multiple stores, in the case above - services.

[luewdkj]

Don't you think that signalStore will be better for this case, do you?