I bet you can understand NgRx after watching this video

My modern Angular course: angularstart.com/
In this video, I give a complete walkthrough of the approach I took to build the state management solution with NgRx for a simple todo application. Although it is simple, we do touch on important points like using effects to save and load data.
Get weekly content and tips exclusive to my newsletter: mobirony.ck.page/4a331b9076
Learn Angular with Ionic: ionicstart.com
Source code: github.com/joshuamorony/ngrx-...
Previous NgRx video: • Why you *should* use N...
Using the Async pipe: • How to use the ASYNC P...
0:00 Introduction
0:56 Key concepts
6:21 Creating actions
8:49 Creating reducers
12:03 Dispatching actions
12:41 Creating selectors
14:54 Creating effects
21:23 Configuring the module
21:43 Conclusion
#angular #ngrx #ionic
- More tutorials: eliteionic.com/
- Follow me on Twitter: / joshuamorony

[@JoshuaMorony]

Join my mailing list for more exclusive content and access to the archive of my private tips of the week: mobirony.ck.page/4a331b9076

[@sfspmusic]

I had a coding task where I had to use NGRX and absolutely no time. So I chose the shortest tutorial, which was this video, and managed to get a grasp of the concept, and do the task. So I want to thank you, Joshua for making this quick and dirty video.

[@Johnathonaaron]

This explanation of asynchronous api fetching was so much clearer then the ones I've been struggling with in React with Redux/Saga. Thank you.

[@mhvd77]

These were actually a highly educational 23 minutes. Thank you!

[@JBuchmann]

This is perfect, thank you! I love how all the code is pre-written and you just walk us through the steps. And a sample app that is simple enough to make it not so confusing. As someone using Angular for 5 years, and managing state with RxJs and services, switching to NgRx is a real challenge mentally. It's a totally different way of thinking about state. But this is the general way it works in other frameworks, so it's good to know in Angular also.

[@andif16000]

Thank you so much for making this video! I have been using NgRx at work for the past year, but I never really understood why I was doing the things I was doing. After watching your code walkthrough something just clicked in my head and everything suddenly made sense. Keep up the good work!

[@mikeadkins9851]

I am preparing for an interview this morning and needed a refresher on NgRx, since it has been a couple years. My wife sent me this and I think I'm going to be okay now.

[@gboyegalawal8881]

Nicely done. Simple, straightforward , zero fluff.

[@drissaitkassimusic]

He is not lying that was a damn good explanation 👍

[@titokris5162]

Great tutorial Josh!!! Thanks for the calm and easy to understand explanations!!! That was epic !!!!

[@jazy3091]

Sweeeet! I just found your channel bc I need to start working with ngRx on a project I'm assigned to and this is probably the best approach to explain reducers I found. Thanks a bunch, you've got a new subscriber! Pls keep on your good work.

[@dpskatoo75]

Very good tutorial, have watched a few others but this one is very practical and finally I can see how to get started with it. Thanks!

[@bestrobin01]

Made me understand all the differenct concepts and components of NgRx! Really been struggling with understanding how it actually works. A couple of RxJs tutorials and this video made me understand everything on a whole different level! Great examples and structure of video.

[@Shinee3e]

Honestly the most complete and easy to grasp explanation of ngrx, thank you so much for making me break the glass of frontend development 😆

[@rianesterhuyse6044]

As someone just jumping back into Angular, this has been a golden resource. Thanks man!

[@BigGingerJake]

I had never seen NgRx before I watched this video. Now I feel like I could easily implement it in a project. This video was very clear, concise, and extremely informative. Thank you! First time I've seen your content, and I've immediately subscribed. Bravo 👏

[@rohitjagannath5331]

very concise and the author sticks to the point. We should make use of this video when we need to quickly brush up our skills on NgRx. Thanks for this video @Joshua

[@Sullivan433]

On the project I am currently working on, there was a guy taking care of all the ngrx stuff, but now that guy is not longer working with us, so I needed to understand the basics of ngrx. Honestly, I analyze our code, and I didn't understand anything. I have watched some other videos, but I still was a bit confused. Now, with this video, I finally understood mostly everything, realizing it is actually really easy. Thanks dude, hope your great work continues helping more people in my situation!

[@rabatstadttv]

Excellent video, this is the first i've seen someone explain ngrx the easiest way, hope to see your next videos, thanks 😊

[@muhammadmanzarabbas8065]

Best Ever explanation on the internet, 22 WORTHY MINUTES FOR SURE .

[@sparshturkane2550]

This was really really helpful. It was so easy compared to other videos i was on the verge of giving up but this video changed my outlook thanks.

[@andrewflorzy]

Thank you for this video!! I’ve watched it probably 5 times over the past few months and this is the first time it’s fully clicked. You explained every part of it very well, I just needed to actually try it out and read their great documentation before I could get my head fully wrapped around the concept. I finally started implementing it in my own project this week because I know it’s an important library learn, and it’s essential to lean on standardized state management and reactivity as applications grow. We’re using NGRX in my job, but it has been mostly abandoned as more people touch the codebase who don’t understand how it works. Turns into a mess of random state management techniques and imperative code. I can’t wait to revive this approach in our project!

[@RajibMostafiz]

Loved it ! I was looking for something to get a quick understanding of NgRx and the catchy name of the video did not disappoint.

[@jamienordmeyer4345]

Another great video, Joshua! I've subscribed! Well done, and thank you!!

[@historicallyelaine]

Quality work right here. Very helpful!

[@RaniLink]

Beautifully explained! thank you!

[@jkevinparker]

This was very helpful. Even helped me understand some of what RxJS is doing in all this. Thanks!!

[@vinaysmith]

Very helpful. Clear and concise

[@JaroNavales]

This is great tutorial and easy to understand! Perfect and thanks!

[@Ch17638]

Thanks for the tutorial; I am just getting into the meat of NgRx and keep feeling like this is the work of a React developer that got so used to Redux and the benefits and decided it should be in Angular though the same benefit from Redux in Angular could be achieved by using a Mediator pattern in a much simpler way. Granted the way reducers are implemented here in the video is simple enough but I have seen some reducers in some of my client's solutions that will make a seasoned dev head spin

[@teckasm]

Fantastic introduction. Thanks!

[@wizzdizzable]

Very nice video! Thanks for a good explanation and some awesome insights!!!

[@benyaminyakobi3652]

Thank you so much. Absolutely goldxgold content!

[@anthonydeville237]

Thanks for this clear and understandable tutorial

[@mongolhvv]

Thank you. Clear explanation ❤

[@lioramar8465]

Thanks for a very detailed tutorial! Keep it up :)

[@robocop30301]

Nice explanation. Much appreciated!

[@matts9216]

Great explanation and demo!! Logically broken down to the different parts and explained their roles. I smashed that like buttom, subscribe, and left a comment so they YT gods will bless you

[@landonrivers]

AWESOME work. Yes I DO understand NgRx now!

[@user-cc8kb]

Thanks a lot! Will dive into it deeper now.

[@thewebartist]

Absolutely fantastic. Thanks

[@gosnooky]

One thing I'd suggest is to keep the todo state folder under the todo tree, because you reference 'TodoService' in your effects file. This I consider an anti-pattern where narrowed application contexts (in this case the Todo context) are referenced by global contexts such as application state.

[@joelmilan7835]

Wish i could like it twice. Thank you very much

[@abhijitkurne7734]

Very good explanation, Thank you !!

[@costagmc1]

Excellent teaching, josh...

[@Ch17638]

This is not a critique on the tutorial its very informative and to the point. The more I look at this pattern, it just gets progressively worse. I have seen 4 different large scale implementations on ngrx on my clients code and not one is done in an eloquent way. Especially reducers become massive , and trying to nav a feature while having massive reducer files ( I have seen some with 2000+ lines of code / while some split the reducer into multiple files causing even more runaround to find the one for your action). Maybe its just a result of poor planning and design , but If Someone can please point me to a ngrx layout that kinda make things easier to find and navigate between actions , reducers and effects I will appreciate. In .net core I am used to using a combination of Domain Driven Design CQRS, and MediatR and using the project layout just makes sense , you can look at a Domain(folder) , look at the filenames in the handlers folder and immediately understand what actions/commands are available on each aggregate root , without having to read through 100's of lines of code.

[@wassimmehanna4402]

That was verry hard to work with the first time. But once implemented, it's a breeze to work with. thanks Joshua

[@thegeniusand7256]

So informative, thanks a lot!

[@FraserMcLean81]

Great video, thanks for sharing!

[@clouds187]

This really just seems like redux for angular.. I love it. I have gotten used to rxjs thanks to your well explained videos, i've even went to the point of using rxjs in react.. made me realise how powerful it is as a library, and made me even better at angular.

[@markvanmameren]

Ng = Angular Rx = Redux so yeah, NgRx = Redux for Angular

[@scottmaness3195]

Thank you so much, this was super helpful!

[@temotsuladze8018]

Thank you for this great video!

[@JBuchmann]

With React, pretty much all devs will also know Redux. But with Angular I'll bet a good percentage don't know NgRx. If nothing else, I think getting familiar with NgRx will give Angular devs a competitive edge in the job market

[@MichaelSalo]

Your Angular code is much nicer than real world Angular code.

[@godfathermikal]

great video. really helped break things down for me in my head. 🙏

[@user-df1pg2uo2x]

kzbin.info/www/bejne/fnisY4SDrrJgsNk

[@seyedamirhosseinrasouli2131]

A wonderful tutorial 😍

[@markvanmameren]

Awesome video!

[@AlainBoudard]

Awesome presentation., thanks Joshua ! About the reducers part, I think it's worth mentioning that the { content } parameter is here to destruct the props that otherwise would contain also the type of the action.

[@JoshuaMorony]

Thanks Alain! And that's a great thing to mention, watching the video back I did worry that people might think that "content" was some special NgRx thing and not just a property of whatever random payload object I was sending along with the action.

[@hansschenker]

@@JoshuaMorony I would have given the name 'todo' not 'content' - even though you only pass the name of a todo!

[@JoshuaMorony]

@@hansschenker yeah I think that would have been better for this example

[@kiranvarghese672]

nothing can explain better than this.

[@ShaifulBorhan]

Hi Josh, in the TodoState you defined the "status" and "error" properties. How do we actually go about using these properties for example to show a loading spinner during loadTodos and an error message on loadTodosFailure actions? Do we have to create new selectors for each?

[@Manuel-DaSilva]

Usually you should create a vm selector, which is a view model selector, for that specific view, that selector should have the shape of {isLoading, error, content} and the component should handle those

[@simransimran6766]

Really nice video❤️❤️tysm

[@rohitsanwariya7217]

Just keep making this videos you are awesome

[@victory_lucky]

Well explained

[@nt9760]

Hi Joshua, thank you for this tutorial. I have a question. WhenI call the select method, it appears an error on the selectAllTodos parameter which was only solved when I assigned to store the type in the constructor: private store: Store. I found this solution on stack but on this tuto you didn't use this solution, so I want to know if it's a change to the new library? Also apart from the fact that we have a second state, is there any use for using AppState in the selector ? Thank you

[@jasper_pa]

Thank you for sharing your solution. I ran into the same problem and tried to find a fix for the whole day..

[@negusdawoo]

Very nice sir

[@subashbarik]

Thanks a lot , great video helped me a lot understanding the NgRx state management. I am relatively new to Angular and have one question : In a larger application since the data that will reside in the 'AppState' will be larger , it is going to affect the performance of the app.

[@hasanmahmud2016]

Works good, tnx

[@CrusaderMen]

Thank you! best explanation I've seen.

[@anj000]

12:17 if you are on strict mode (it is enabled by default) line 17 should be like this: constructor(private store: Store); to avoid this error with selector: "app.state.ts(4, 3): 'todos' is declared here."

[@ceriwestcott8784]

life saver

[@brucelee7782]

thank you bro omg

[@gameggerpc]

This needs to get upvoted more, this is actually a life saver

[@programmingdesign4382]

Thank you.

[@Iam_AndersonP]

Nice example, i just have a soubt, if you want to create a filter and aply that filter to the list of todos, you would create a new state for the results or it will be a new efect aply to the main todo array?

[@giorgiozarantonello2211]

hi joshua , with your video passing from react to ngrx in angular was very simple! i just can't build the code , terminal provides me a lot of errors , do you have any suggestions how to build correctly the project ? thanks

[@franciscogiordano298]

Joshua you are an angel sent from the Angular gods! haha

[@micortes89]

This looks so elegant but it is based in some abstract concepts, and quite honestly, it is just a simple todo application (could be coded so much simpler than this).

[@pavelhaletski1844]

Good stuff

[@theoverself800]

Hello Joshua, so if I understand it, you need to dispatch in ngOnInit action like allTodos and then in code above you are listening to again all todos selector as $observable and then show data in html using | async pipe, right? and also this dispatch is listening in effects from where you get data like from api calls. So basically, there is always two listeners for one action like selector in template and also effects that listen to this kind of action.

[@youssefadel94]

Awesome

[@Brunoalves-wi5bk]

Can you explain why did you use promise in the api call, instead of using only observable? Cause in my head I don't see any reason so convert results to promises and them convert it back to observable

[@tleveque]

This video just confirm what I think about NgRx.... Overcomplicated.... for nothing! I am developing huge professional applications using Angular for the last 5-6 years. I read many articles about NgRx, watch many videos..... and still, I don't understand why would I need it. What is the problem we are trying to fix here?? Maintainability? Please!!! This is so complicated and confusing. There is so many part to maintain. This is the total inverse of maintainability. In Angular we have dependency injections and services. We can do everything with that and keep it simple. Maybe React or Vue really need that thing, but not Angular. In addition to my 5-6 years of working with Angular, I also have 25 years of experience of backend development using Java. The most important thing I learned from all those years? Make your code maintainable! Keep it simple. Add comments. Make your code readable. You want your code be be understand really easily by the next developper that will need to go in it to fix a bug or add a feature in 5 years from now. There is nothing more important than that. Nothing. And that Ngrx thing.... well... good luck! It reminds me the way people only swear by reactive form without ever realizing that they can do everything with template driven form with half of the work!

[@rakeshpagi]

Ngrx can be powerful but if made to do so by writing more declarative codes. Here's a more declarative library angular-Usestate made using ngrx.. Demo of the similar to do app with absolutely no code inside a component : kzbin.info/www/bejne/Z4qlooKhe8uDkMk

[@tntg5]

I agree 1000%. Its such a verbose and bug prone system when you can achieve the same result with way less code, yet using one observable or Subject.

[@Di-yes]

Guys, by the way is it OK really to use just service injections. I've just ststrted to learn angular and it seems much easier approach

[@ipoop4359]

React has usecontext for something similar like this

[@ipoop4359]

@@Di-yesfor small projects its ok. But its kinda bad practice in some scenarios because a component is dependent on the state

[@ezraorina100]

How would you recommend the setup for ngrx when using nx

[@cburys]

first, Thanks! super helpful video. I have only one question, what is the 'from' call wrapping saveToDos @20:46 ?

[@user-eg8uz7hi6h]

Hi Joshua, I am about to start a Angular project based on data integration & data pipeline. Where a new data can be created, from multiple data sources (Amazon RDS, Hadoop, PosGres, stc.) . So should I use NGRX or not ?

[@chunckyfreshnut]

Thank for the explanation. NgRx is trying to simulate a single processor taking multiple request in a stack. It is more work than it really worth. Can use Rxjs and local store to achieve the same result and faster and easier?

[@danielrowe6107]

Redux is probably one of the best patterns created

[@danielklein2694]

Hi, thx for tutorial. I wanter to learn ngrx like 3 months ago but I didn't feel like it till I watched this video. But I ran into some issues. Right now I'm working on a school project and I'm using prisma + express as a backend but I have problem with saving all object at once I would need to call add or remove just for one item per action and not whole list / state but don't really know how to do that yet. Also second problem is that as you used {content:string} as a type for adding Todo I'm using interface but unfortunately I found out that actions adds that type property to object when they get dispatched and that makes me problem when I send it to the back end because type isn't defined in my interface Is it possible somehow remove that property ? i found delete fucntion from ts but i cant call it because when i loop through my last before sending in service obviously type isn't know as property since actions forcefully add's it to it.

[@hoangtuan4592]

Could you make a video about Angular - NX Workspace and Using Ngrx for state management?

[@TommiSvaerd]

One thing i've struggled with when working with NGRX is how to handle data when for example you are logging in. Should I just dispatch a bunch of fetch actions in app component when user is logged in? Or should I have a side effect that listens to a loginSuccessful action and then do all dispatches there? Never found a best practice in this scenario, any advice?

[@B1TCH35K1LL3R]

great video! just one quick question: in the effect code (around minute 19:20) why is loadTodosSuccess being called like so while loadTodosFailure is wrapped in an "of" call?

[@JBuchmann]

I think it has something to do with it being an "error". When there is an error you want the operator flow to continue instead of ending there. So the catchError function is returning an Observable (because of the "of"). I just remember from other RxJs tutorials that in the catchError operator you still have to return an observable.

[@TheSaintsVEVO]

I wish KZbin didn’t have a “hearts” feature on comments, so questions like these would show up instead of the channel’s hearted comments showing up at the top. Those are always just “great tutorial” or whatever and helps no one

[@thanhvan3528]

Thank you so much bro. Can anyone help me to show where saveTodo$ effect was trigged?

[@ztamizzen]

Excellent, this really helped me understand NgRx and made my code look a lot more elegant. ❤️ How do you not get the TypeScript errors that I get though?!...

[@negusdawoo]

Is createFeatureSelector a replacement/option for appstate

[@DonCadavona]

The problem with introducing complex concepts like these is that it is so hard to fit into your mind, that some think they got it, but are actually implementing it wrong, or overuses it, making the already complex concept even more unnecessarily complex, I would even call it wrong.

[@_Greenflag_]

18:29 why using a Promise here instead of Observable with RxJs ?

[@wafel_dev]

Hey Josh, How NgRx should be structured in apps broken down by feature modules. For example like the one from your video 'How to structure your Angular apps like a Googler' ?

[@JoshuaMorony]

Hey check out this page in the docs: ngrx.io/guide/store/feature-creators - the general idea is that you register a feature with the StoreModule.forFeature() static method - in the end your global store is basically an object storing values, and by creating a feature your feature module will get a "slice" of that global state dedicated to it (e.g. a property within that object) and that property will be named whatever you register your feature as using forFeature()

[@johnddonnet5151]

Can you replace it completely with basic https and RxJs services? And how you go refactoring 5 stores that uses 4 APIS for immutable data?

[@JoshuaMorony]

Yes you can just use standard services/RxJS for state management - NgRx is never required, it's more a question of when it makes sense to use it. I'm not sure what you mean with your second question.

[@adityamittal4357]

I think the only thing it does is help people coming to Angular from the React world who are used to Redux. I find Angular's native class based state management (which is just good old OOD) much easier than all this actions and reducers and effects and selectors stuff.

[@biosgl]

Great vid, I would suggest lowering the music volume.

[@anutaNYC]

How do you call api url from the services?! I'm always confused by this pattern, where is http request?

[@JoshuaMorony]

The general idea with this pattern is that you trigger an action when you want to load something, and you have an effect that is listening for that action. That effect triggers the HTTP request and if it is successful the effect will trigger some sort of "success" action with the data from the HTTP request as the payload, or an "error" action if it fails.

[@mdrabbani6285]

Your voice is quite like Ali Abdaal's voice. 😯😯😯

[@balajibalamurugan8053]

does it give us more code to type ?for component we have to created 4 files ? does it give us more code to write ?\

[@JoshuaMorony]

There is more code to write, especially initially, but it might also save you having to write more code later in some circumstances.

[@balajibalamurugan8053]

@@JoshuaMorony later means ? do you mean in refactoring ?

[@JoshuaMorony]

@@balajibalamurugan8053 no moreso when you are continuing to build the application - it's a bit of work up front to set up the reducers, but once everything is in place you have a very streamlined and organised way to add new features

[@balajibalamurugan8053]

@@JoshuaMorony yeah ok !understood

[@dnguyendev]

Easily my most favorite video about NgRx