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

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

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

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

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

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

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

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

[@mirciulicasm]

Thank you, very simple and straightforward!

[@MonsterlessonsAcademy]

Glad it was helpful!

[@ma08serrano]

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

[@MonsterlessonsAcademy]

You are welcome!

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

[@uaplatformacomua]

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

[@MonsterlessonsAcademy]

Thanks!

[@nelsonmudanya3015]

Great insights, everything ngrx explained in under half an hour

[@MonsterlessonsAcademy]

Thank you!

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

[@front-flow]

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

[@regedam7559]

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

[@MonsterlessonsAcademy]

You are welcome!

[@user-bw2ie9zw2f]

short, simple, and highly informative

[@MonsterlessonsAcademy]

Glad you liked it!

[@ghkpr]

thanks, the way you teach is just perfect

[@MonsterlessonsAcademy]

Glad you think so!

[@enes98li1]

You made it look easy, thank you!

[@MonsterlessonsAcademy]

You're welcome!

[@prafull9821]

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

[@MonsterlessonsAcademy]

Glad to hear that

[@nguyencuonguuu]

Excellently explained! Thank you sir.

[@MonsterlessonsAcademy]

Glad it was helpful!

[@okeagi-tuedor5935]

The best video on the topic. Appreciation.

[@MonsterlessonsAcademy]

Glad you think so!

[@radimsafran8475]

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

[@MonsterlessonsAcademy]

Wow, thanks!

[@onlydev4099]

Thank you man, You are a great teacher for me

[@MonsterlessonsAcademy]

Glad to hear that!

[@derschratling5604]

This is a very helpful Video, thanks a lot!

[@MonsterlessonsAcademy]

Glad it was helpful!

[@herbaltreatment396]

awesome tutorial you made thing so easy Thanks alot

[@MonsterlessonsAcademy]

Glad it helped!

[@gaetanlavit7330]

Thanks, never disappoints

[@MonsterlessonsAcademy]

You are welcome!

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

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

[@f3t312]

Great work, thanks!

[@MonsterlessonsAcademy]

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

[@davebudah]

Thanks again for this one.

[@MonsterlessonsAcademy]

My pleasure!

[@ronniea7x]

awesome tutorial :D you are the best

[@MonsterlessonsAcademy]

Thanks! 😃

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

[@ninearc2207]

Thank you for your video. 🙂

[@MonsterlessonsAcademy]

You're welcome 😊

[@andrewrayanit]

Great work.

[@MonsterlessonsAcademy]

Thanks

[@elhadjiomardione9425]

Great tutorial thanks

[@MonsterlessonsAcademy]

You're welcome!

[@wealthiduwe2817]

Thanks so much!!!

[@MonsterlessonsAcademy]

You're welcome!

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

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

[@vadymhres8295]

nice, thank you so much !

[@MonsterlessonsAcademy]

You are welcome!

[@andrewparker7603]

This is great!

[@MonsterlessonsAcademy]

Thank you!

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

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

[@sdev8921]

18:10 great explanation - this solved my issue

[@MonsterlessonsAcademy]

Glad to hear that!

[@come_and_we_worship]

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

[@MonsterlessonsAcademy]

Thank you!

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

[@sivasankaran99]

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

[@MonsterlessonsAcademy]

You are welcome!

[@sourabhpandit6724]

simple awesome

[@MonsterlessonsAcademy]

Thanks a lot!

[@YusupOzdoyev]

thank's!!!

[@MonsterlessonsAcademy]

You're welcome!

[@avalanche322]

Cool!

[@MonsterlessonsAcademy]

Thanks

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

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

[@dprggrmr]

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

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

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

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

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

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

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

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

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

[@danilo_teixeira]

Do I need meta-reducers to make it work?

[@MonsterlessonsAcademy]

No

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

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

[@daviddonovan425]

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

[@MonsterlessonsAcademy]

Thank you

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

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

[@xxfaironxx]

10/10

[@MonsterlessonsAcademy]

Thanks!

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

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

[@expertreviews1112]

That was overwhelming tbh

[@MonsterlessonsAcademy]

I feel your pain

[@eagold]

where is animations video?

[@MonsterlessonsAcademy]

Here kzbin.info/www/bejne/bnPEpYiHjtmAors

[@johnparungao1354]

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

[@MonsterlessonsAcademy]

Life is pain

[@yusufkebbe2909]

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

[@MonsterlessonsAcademy]

Ok next time

[@manit77]

That's very complicated.

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

[@venc01]

Great, now I hate Angular even more.

[@MonsterlessonsAcademy]

Money fixes this problem

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

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