Angular Redux - NgRx Angular, NgRx store, NgRx Effects, NgRx selectors

[@MonsterlessonsAcademy]

WATCH NEXT: Angular with NgRx - Building Angular Project From Scratch - kzbin.info/www/bejne/rJTJi2N7htWMiqMsi=BptT7eqgflHIoQiQ

[@krish4indians]

Thank you! You’ve absolutely teared it down with this NgRx video! Your explanation of the concepts and practical examples is spot on. It’s clear, engaging, and incredibly helpful-amazing work!

[@MonsterlessonsAcademy]

Glad it was helpful!

[@ThalisUmobi]

Started using Angular with NGRX after watching one of your videos, and after we pass the boilerplate phase, its a life changer! So much control.

[@MonsterlessonsAcademy]

Yes exactly. Lots of boilerplate but also deep control.

[@rembautimes8808]

Thank you for this amazing tutorial - I have been following your videos for a couple of months already and admire the thought that goes into it. I code for a personal project and tried my hand at ngrx last year and gave up. So I was a bit apprehensive this time round and followed your steps attentively so I wouldn't get lost. And walla - it worked. Without your careful explanation, it would be so easy to get confused for first timers. One modification I did was to wrap the actions within a namespace to make the import easy. ( ChatGPT was offering some suggestions but I think your way is better as the flow is well separated into actions, effects, reducers and selectors )

[@MonsterlessonsAcademy]

Glad to hear that!

[@marcopolocs]

Gotta say, you have great videos about Angular. The RxJS video was one of the best and only then did I understand the usage of async pipe for example. Can't wait to jump into NgRx as well!

[@MonsterlessonsAcademy]

Then I can recommend you my Angular course 12 hours long where we create a real application and using heavily NgRx and RxJS. monsterlessons-academy.com/courses/angular-and-ngrx-building-real-project-from-scratch

[@f3t312]

Great work, thanks!

[@MonsterlessonsAcademy]

Thank you so much for your support. It means a lot to me!

[@radimsafran8475]

Best intro to Ngrx i've seen so far! :)

[@MonsterlessonsAcademy]

Wow, thanks!

[@ParshwaChokshi]

short, simple, and highly informative

[@MonsterlessonsAcademy]

Glad you liked it!

[@nelsonmudanya3015]

Great insights, everything ngrx explained in under half an hour

[@MonsterlessonsAcademy]

Thank you!

[@dayronalfaro9461]

It change my mind about NgRx and React Redux because I dont like React too much but with this video I will give a try it seems simple the way of handling data across the application, life saver

[@prafull9821]

Your videos are very helpful to understand the concept in simple ways

[@MonsterlessonsAcademy]

Glad to hear that

[@okeagi-tuedor5935]

The best video on the topic. Appreciation.

[@MonsterlessonsAcademy]

Glad you think so!

[@ma08serrano]

I have been waiting for this course. Thanks for much.

[@MonsterlessonsAcademy]

You are welcome!

[@mustufazaki3438]

Very well explained with great examples

[@MonsterlessonsAcademy]

Glad you liked it!

[@mirciulicasm]

Thank you, very simple and straightforward!

[@MonsterlessonsAcademy]

Glad it was helpful!

[@uaplatformacomua]

Awesome course - much better a lot of I bought before!!!! Thank you.

[@MonsterlessonsAcademy]

Thanks!

[@sdev8921]

18:10 great explanation - this solved my issue

[@MonsterlessonsAcademy]

Glad to hear that!

[@andromadusnaruto1544]

Totally awesome tutorial! I've been learning state management recently but I've not been able to fully comprehend the concept, and proper usage, of selectors. However, after watching this, all seems clear now. Just have to do more practice.

[@MonsterlessonsAcademy]

Glad it was helpful!

[@andromadusnaruto1544]

@@MonsterlessonsAcademy I forgot to say thanks! Thank you!

[@Tillbert99]

Danke!

[@MonsterlessonsAcademy]

Thank you so much for your support. It means a lot to me!

[@come_and_we_worship]

Excuse me ! Its Clever from East Africa. This is surely amazing

[@MonsterlessonsAcademy]

Thank you!

[@muralir2939]

I saw many videos but it's never used practically on projects but you rockkkkkk. It's working fine. Fantastic teacher 👏 ❤️

[@MonsterlessonsAcademy]

Thank you so much 😀

[@ghkpr]

thanks, the way you teach is just perfect

[@MonsterlessonsAcademy]

Glad you think so!

[@nguyencuonguuu]

Excellently explained! Thank you sir.

[@MonsterlessonsAcademy]

Glad it was helpful!

[@anthonydeville237]

Thanks for this amazing structured and well-explained tutorial. Helped me a lot in understanding the basic concepts of NgRx! :)

[@MonsterlessonsAcademy]

Glad it helped!

[@eagold]

really amazing tutorial I watched a lot of videos, but only after that I started to understand how to use NgRx, maybe watching the previous videos I got a general idea, or maybe your video is so good

[@MonsterlessonsAcademy]

Glad it helped!

[@onlydev4099]

Thank you man, You are a great teacher for me

[@MonsterlessonsAcademy]

Glad to hear that!

[@Shinee3e]

Thank you so much for the explanation but i think it would be better to use a normal IDE as it's a bit hard to keep track of your solution structure while watching

[@MonsterlessonsAcademy]

You are welcome! You can see a structure in the source code in the description

[@regedam7559]

Thats super useful video for me! Thank you a lot, man

[@MonsterlessonsAcademy]

You are welcome!

[@thomasbisson8523]

Very clear thank you. If you could just change your IDE for your demo it would be awesome, there is no file tree so it's quite hard to follow what you are saying + read the code your typing + understanding in which file do you write the code. VSCode is the most popular IDE so it could be a plus

[@MonsterlessonsAcademy]

I'm using vscode in newer videos

[@karthikeyan878]

Please make a video on below topics 1. Husky + lint-staged + eslint + prettier configuration with Angular 2. Feature flag implementation in Angular

[@MonsterlessonsAcademy]

Thanks for the ideas. Will add them to the list of future videos.

[@stickyamp5996]

I've been hours struggling with a problem, i implemented redux just like you do but when i try to access in a guard(canActivate) to some property " return this.store.select(isAuthSelector).pipe(..." (Knowing that in constructor i fire "this.store.dispatch(Actions.getAuth());" i get an error that says that state is undefined in the selector. And indeed using redux tools i kind of see that state is undefined until my effect which i set to 2 seconds delay completes. I dont understand

[@MonsterlessonsAcademy]

Your stream of data is empty for 2 seconds. You auth guard should wait for the value and not get undefined this.store.seelct(...).pipe(filter(value => value !== undefined)) // or whatever you have as a default.

[@stickyamp5996]

@@MonsterlessonsAcademy Indeed i think what might be happening is that my ngrx store is somehow loading with some delay. I try to fetch data from store in guards or app component constructor/ngOnInit but data is undefined there. But a second later, when my app loads i see in redux tools the state loaded. This is not about the 2 seconds wait in the service sadly :(

[@stickyamp5996]

Honestly i think that initialState is not actually setting the initial state, but that is not possible, right? right?! :D

[@Alexanderscodesamples-x4u]

Thank you for the video.

[@MonsterlessonsAcademy]

You're welcome!

[@GezimSadrija]

Small tip: Use the ngrx-immer lib for Angular. It allows you to write „normal“ code inside your reducers instead of having to write immutibality safe code.

[@MonsterlessonsAcademy]

It is of course a choise of every developer himself but I can't agree with ideas of ngrx-immer or immer itself. I write my whole code in javascript or any framework in immutable way. Immer just converts your "normal" not immutable expressions in immutable. So instead of seeing correct immutable code it "simplifies" writing immutable code by hiding how you should write it correctly. So from my perspective it is 1 more layer which can break/be difficult to debug + makes your code not obvious and doesn't teach correct patterns.

[@enes98li1]

You made it look easy, thank you!

[@MonsterlessonsAcademy]

You're welcome!

[@liga_frontend]

Это супер, спасибо за то, что ты делаешь

[@sivasankaran99]

❤ thank you so much buddy, I'm from India

[@MonsterlessonsAcademy]

You are welcome!

[@derschratling5604]

This is a very helpful Video, thanks a lot!

[@MonsterlessonsAcademy]

Glad it was helpful!

[@dumidupramith3881]

can you videos on vs code. its very user friendly and beginers can easily understand. your explanation good but code editor problem for me

[@MonsterlessonsAcademy]

Nope because I use the editor which is comfortable for me. It won't be professional with editor that I'm not using. You can always take a source code from the description.

[@gaetanlavit7330]

Thanks, never disappoints

[@MonsterlessonsAcademy]

You are welcome!

[@newen1314]

As a beginner the learning curve was already severe, and now since version 17 it changed again with standalone components... I am kinda sad as I was very excited viewing this tutorial about ngrx that was highly recommended by my tutor, maybe I can still watch the whole course and practice with a sample project using version 16?

[@MonsterlessonsAcademy]

Angular 16 already allows using standalone components. You can still write modules in both versions.

[@DeepakNegiSunny]

Its was very helpful "after watching tutorials on Redux", Can u make a video with more complex real time example covering more aspects of each building block of NRGX

[@MonsterlessonsAcademy]

I heavily cover everything needed to use NgRx in production in my 12 hours Angular course. monsterlessons-academy.com/courses/angular-and-ngrx-building-real-project-from-scratch

[@Georgii1212]

Can you please recommend a video or tutorial explaining REDUX more in detail ? Another question : Angular has 2 way data binding, while, in my understanding, Redux is used in the context of 1 way data binding such as React library. So why, in this case, use Redux with Angular ? Thanks

[@MonsterlessonsAcademy]

Sure! I already made videos on that kzbin.info/www/bejne/nn62hYJqmNWDl7M kzbin.info/www/bejne/rIaoknela8aLn8U kzbin.info/www/bejne/nZnQe2R5rM6Gntk

[@Georgii1212]

@@MonsterlessonsAcademy thanks a lot, I have watched the 2 shorter videos so far. So, in my understanding, Redux can be used independently of whether it is a vanilla JS app or React or Angular or Vue app, and no matter if the framework has 2 way data binding (Angular, Vue) or 1 way binding (React). I understood that Redux brings a strict architecture and global state which is useful for big projects with lots of developers. For smaller projects, with few developers, Redux is not necessary, as far as I understand, because Angular has services, React has Context and that is enough for those small projects.

[@MonsterlessonsAcademy]

@@Georgii1212 it always has 1 way data flow. Other things you wrote correct.

[@MarfTaylor]

do I need to make more than once the onSuccess and onFailure if I have more than one action ?

[@MonsterlessonsAcademy]

typically you create 3 actions for every async stuff that you do

[@MarfTaylor]

yes but isn't that pattern prepetitive sir ?@@MonsterlessonsAcademy

[@SuperMati25]

Great video, but why you didn't continue with update and delete.

[@MonsterlessonsAcademy]

This video is just to bring you understanding of NgRx. If you want to learn it deeper on the real example you can check my full course about Angular and NgRx. monsterlessons-academy.com/courses/angular-and-ngrx-building-real-project-from-scratch

[@gauravsingh-qt2zo]

Can anyone explain when to choose angular over react?

[@MonsterlessonsAcademy]

When you have angular jobs in your city and they are paying more than for react

[@dua_aur_dawa]

awesome tutorial you made thing so easy Thanks alot

[@MonsterlessonsAcademy]

Glad it helped!

[@MrRiseful]

Hey, best regards, would you please make a course for NGXS state manager too, please?

[@MonsterlessonsAcademy]

I will add it to the list of ideas.

[@L-Lesiv]

So is it not possible to simply use service and then use action inside it or in subscribe without using effect?

[@MonsterlessonsAcademy]

You can but then it is not different to publish/subscribe pattern which has lots of problems. Redux is a single flow of data.

[@mohammadfarhadi9407]

It was awesome! thank you for sharing your knowledge for free. Did you cover everything in the todo project?

[@MonsterlessonsAcademy]

I covered most of ngrx stuff but there are different advanced topics which you might learn later.

[@ethelbertdickson]

Thanks so much for this video. It makes all the difference. Please what IDE were you using?

[@MonsterlessonsAcademy]

You are welcome. It's Vim here is my video about it. kzbin.info/www/bejne/j6Ovmqidec12q80

[@henrikinaski5062]

Hello. First thanks for such a nice video. Can you please advise me how to build a project from your repo? After cloning it I get only: index & main scripts? Where are the rest? I see on your github repo that there are more files. What I should do?

[@MonsterlessonsAcademy]

npm install then npm start. I don't know why you get just 2 files.

[@andrewrayanit]

Great work.

[@MonsterlessonsAcademy]

Thanks

[@danilo_teixeira]

How could I keep the store data after refreshing the page? When I do refresh, I'm losing the data

[@MonsterlessonsAcademy]

NgRx and all javascript stuff stores everything in memory. You can either use localstorage to store data between reloads or rebuild state with API calls and data.

[@qwerty123246]

Nice job buddy! By the way, how can I combine multiple reducers for a single feature (I mean in StoreModule().forFeature() ) ? Is it even possible? Or I can combine MULTIPLE reducers only in StoreModule.forRoot() method? Thanks

[@joelmilan7835]

Hello, please what IDE do you make use of?

[@MonsterlessonsAcademy]

Hi, it's Vim. Here are my videos about it kzbin.info/www/bejne/oGfYooKsibekbKs kzbin.info/www/bejne/j6Ovmqidec12q80 kzbin.info/www/bejne/jpKXkoKFd5yLkNE

[@dprggrmr]

Is this a real human or some kindve new ai human? Great video!

[@ninearc2207]

Thank you for your video. 🙂

[@MonsterlessonsAcademy]

You're welcome 😊

[@davebudah]

Thanks again for this one.

[@MonsterlessonsAcademy]

My pleasure!

[@danilo_teixeira]

Do I need meta-reducers to make it work?

[@MonsterlessonsAcademy]

No

[@elhadjiomardione9425]

Great tutorial thanks

[@MonsterlessonsAcademy]

You're welcome!

[@scratchercatcher6760]

Thank you, you explained it very well. Can you make a video about unit test the same app please?

[@MonsterlessonsAcademy]

I will add it to the list of ideas. Thank you!

[@oBezBasKa]

What about if I have some request with pagination query param like (page, limit) ?

[@MonsterlessonsAcademy]

you just pass needed params in actions. We make such things in my full course with NgRx monsterlessons-academy.com/courses/angular-and-ngrx-building-real-project-from-scratch

[@oBezBasKa]

@@MonsterlessonsAcademy yes, i found, thx

[@priyamganguly]

I followed the course all throughout and wrote the codes exactly as shown here. But there's no output on the browser. Also, in the Redux tool of the browser dev tools, I don't see any state changes. It always remains null and empty. Surprisingly, there's no possible error in my code as it gets compiled successfully every time. So what am I doing wrong? Any suggestions, please?

[@MonsterlessonsAcademy]

You can download the source code of the video and check if it works there.

[@ronniea7x]

awesome tutorial :D you are the best

[@MonsterlessonsAcademy]

Thanks! 😃

[@maxympishchuk8242]

Can you please tell which environment and font do you use in that video? Btw the tutorial was great)

[@MonsterlessonsAcademy]

It's macos, alacritty with monaco font.

[@andrewparker7603]

This is great!

[@MonsterlessonsAcademy]

Thank you!

[@hamza201183]

Hi Oleksandr, why didn't you start to promote your new Angular course yet? :)

[@MonsterlessonsAcademy]

I will release the announcement next Tuesday :)

[@hamza201183]

@@MonsterlessonsAcademy Well I didn't wait for the announcement... :D

[@MonsterlessonsAcademy]

@@hamza201183 I'm happy to hear that! I put 5 months effort in the course.

[@maximl4851]

How can I check my errorSelector, I mean how to change http status and replace response body

[@MonsterlessonsAcademy]

You need to change it on backend or write tests.

[@vadymhres8295]

nice, thank you so much !

[@MonsterlessonsAcademy]

You are welcome!

[@ՍերինեԲաղդասարյան]

The Best

[@MonsterlessonsAcademy]

Thanks!

[@wealthiduwe2817]

Thanks so much!!!

[@MonsterlessonsAcademy]

You're welcome!

[@michelchaghoury9629]

please we need mini projects with angular, ngrx, reactive api calls (CRUD) and thank you

[@MonsterlessonsAcademy]

I have a full 12 hours Angular course which covers all this in depth and teaches you on the real project monsterlessons-academy.com/courses/angular-and-ngrx-building-real-project-from-scratch

[@daviddonovan425]

Posts is a confusing name for a component... Maybe Articles? Anyway... Very informative!

[@MonsterlessonsAcademy]

Thank you

[@sourabhpandit6724]

simple awesome

[@MonsterlessonsAcademy]

Thanks a lot!

[@avalanche322]

Cool!

[@MonsterlessonsAcademy]

Thanks

[@eagold]

where is animations video?

[@MonsterlessonsAcademy]

Here kzbin.info/www/bejne/bnPEpYiHjtmAors

[@YusupOzdoyev]

thank's!!!

[@MonsterlessonsAcademy]

You're welcome!

[@xxfaironxx]

10/10

[@MonsterlessonsAcademy]

Thanks!

[@expertreviews1112]

That was overwhelming tbh

[@MonsterlessonsAcademy]

I feel your pain

[@johnparungao1354]

Damn, coming from Vuex state management, this sht is confusing to understand

[@MonsterlessonsAcademy]

Life is pain

[@sdsd-ec8rw]

couldn't watch the video. large font, no tabs so it's not clear which file is open and edited at the moment. Sorry but this is dislike

[@yusufs_solos]

Bro next time use VSC we can't understand what you doing

[@MonsterlessonsAcademy]

Ok next time

[@RayZde]

That's very complicated.

[@MonsterlessonsAcademy]

Life is pain

[@andreip.8321]

That's a pretty nice explanation of NgRx, but I've always wondered... are you part of a cult or something that doesn't allow you to use IDEs, like ANY NORMAL DEV out there? Just asking, because it's pretty annoying watching these tutorials using...whatever tool you're using. Just saying... it's 2024. Other than this, great tutorials, but again, it's painful to watch using whatever useless editor you're using.

[@venc01]

Great, now I hate Angular even more.

[@MonsterlessonsAcademy]

Money fixes this problem

[@MrgnUTube]

NOPE.

[@domjanzsoo]

Trying something similar but instead of a boolean posts.isLoading I have a string dashboard.title state property. For some reason this method this.title$ = this.store.pipe(select(titleSelector)); gives me an object. It looks like it just stays as an Observable object, because it never gets the title value from the selector. Any idea what can be wrong?

[@MonsterlessonsAcademy]

Check your state in redux devtools. if it is correct the problem is in selector.

[@karthicks859]

To be honest It's hard to remember+implement all these stuff while working.Learning curve is hard for anyone! THIS technology surely diminish

[@MonsterlessonsAcademy]

I agree but still it is the most popular state solution.