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 )
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!
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
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
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
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.
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.
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.
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
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
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?
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.
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
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
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
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.
@@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 :(
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
Sure! I already made videos on that th-cam.com/video/hMSTO4cpPaQ/w-d-xo.html th-cam.com/video/vUEaDo6aXic/w-d-xo.html th-cam.com/video/ghmJ1CwiShw/w-d-xo.html
@@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.
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?
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
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
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?
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.
Hi, it's Vim. Here are my videos about it th-cam.com/video/j6uqOvTRq6I/w-d-xo.html th-cam.com/video/YrLiugDhCuk/w-d-xo.html th-cam.com/video/Xa4aOOB7XZo/w-d-xo.html
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
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
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.
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?
WATCH NEXT: Angular with NgRx - Building Angular Project From Scratch - th-cam.com/video/vcfZ0EQpYTA/w-d-xo.htmlsi=BptT7eqgflHIoQiQ
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.
Yes exactly. Lots of boilerplate but also deep control.
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 )
Glad to hear that!
short, simple, and highly informative
Glad you liked it!
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!
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
Great insights, everything ngrx explained in under half an hour
Thank you!
Best intro to Ngrx i've seen so far! :)
Wow, thanks!
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
The best video on the topic. Appreciation.
Glad you think so!
Your videos are very helpful to understand the concept in simple ways
Glad to hear that
Very well explained with great examples
Glad you liked it!
Excuse me ! Its Clever from East Africa. This is surely amazing
Thank you!
18:10 great explanation - this solved my issue
Glad to hear that!
I saw many videos but it's never used practically on projects but you rockkkkkk. It's working fine. Fantastic teacher 👏 ❤️
Thank you so much 😀
Awesome course - much better a lot of I bought before!!!! Thank you.
Thanks!
thanks, the way you teach is just perfect
Glad you think so!
Thank you, very simple and straightforward!
Glad it was helpful!
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
You are welcome! You can see a structure in the source code in the description
I have been waiting for this course. Thanks for much.
You are welcome!
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.
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.
Excellently explained! Thank you sir.
Glad it was helpful!
Thank you man, You are a great teacher for me
Glad to hear that!
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.
Glad it was helpful!
@@MonsterlessonsAcademy I forgot to say thanks! Thank you!
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
I'm using vscode in newer videos
Thanks, never disappoints
You are welcome!
Это супер, спасибо за то, что ты делаешь
Please make a video on below topics
1. Husky + lint-staged + eslint + prettier configuration with Angular
2. Feature flag implementation in Angular
Thanks for the ideas. Will add them to the list of future videos.
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
Glad it helped!
Thank you for the video.
You're welcome!
Thanks for this amazing structured and well-explained tutorial. Helped me a lot in understanding the basic concepts of NgRx! :)
Glad it helped!
This is a very helpful Video, thanks a lot!
Glad it was helpful!
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?
Angular 16 already allows using standalone components. You can still write modules in both versions.
You made it look easy, thank you!
You're welcome!
can you videos on vs code. its very user friendly and beginers can easily understand. your explanation good but code editor problem for me
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.
Thats super useful video for me! Thank you a lot, man
You are welcome!
❤ thank you so much buddy, I'm from India
You are welcome!
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
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
Hey, best regards, would you please make a course for NGXS state manager too, please?
I will add it to the list of ideas.
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
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.
@@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 :(
Honestly i think that initialState is not actually setting the initial state, but that is not possible, right? right?! :D
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
Sure! I already made videos on that
th-cam.com/video/hMSTO4cpPaQ/w-d-xo.html
th-cam.com/video/vUEaDo6aXic/w-d-xo.html
th-cam.com/video/ghmJ1CwiShw/w-d-xo.html
@@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.
@@Georgii1212 it always has 1 way data flow. Other things you wrote correct.
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?
npm install then npm start. I don't know why you get just 2 files.
Great work.
Thanks
Is this a real human or some kindve new ai human? Great video!
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
Great video, but why you didn't continue with update and delete.
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
awesome tutorial you made thing so easy Thanks alot
Glad it helped!
Great work, thanks!
Thank you so much for your support. It means a lot to me!
Thank you for your video. 🙂
You're welcome 😊
Thanks so much for this video. It makes all the difference. Please what IDE were you using?
You are welcome. It's Vim here is my video about it.
th-cam.com/video/YrLiugDhCuk/w-d-xo.html
Great tutorial thanks
You're welcome!
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?
You can download the source code of the video and check if it works there.
do I need to make more than once the onSuccess and onFailure if I have more than one action ?
typically you create 3 actions for every async stuff that you do
yes but isn't that pattern prepetitive sir ?@@MonsterlessonsAcademy
It was awesome!
thank you for sharing your knowledge for free.
Did you cover everything in the todo project?
I covered most of ngrx stuff but there are different advanced topics which you might learn later.
Thanks again for this one.
My pleasure!
So is it not possible to simply use service and then use action inside it or in subscribe without using effect?
You can but then it is not different to publish/subscribe pattern which has lots of problems. Redux is a single flow of data.
Thank you, you explained it very well. Can you make a video about unit test the same app please?
I will add it to the list of ideas. Thank you!
The Best
Thanks!
How could I keep the store data after refreshing the page? When I do refresh, I'm losing the data
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.
awesome tutorial :D you are the best
Thanks! 😃
Hello, please what IDE do you make use of?
Hi, it's Vim. Here are my videos about it
th-cam.com/video/j6uqOvTRq6I/w-d-xo.html
th-cam.com/video/YrLiugDhCuk/w-d-xo.html
th-cam.com/video/Xa4aOOB7XZo/w-d-xo.html
Do I need meta-reducers to make it work?
No
Hi Oleksandr, why didn't you start to promote your new Angular course yet? :)
I will release the announcement next Tuesday :)
@@MonsterlessonsAcademy Well I didn't wait for the announcement... :D
@@hamza201183 I'm happy to hear that! I put 5 months effort in the course.
This is great!
Thank you!
please we need mini projects with angular, ngrx, reactive api calls (CRUD) and thank you
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
What about if I have some request with pagination query param like (page, limit) ?
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
@@MonsterlessonsAcademy yes, i found, thx
Can you please tell which environment and font do you use in that video? Btw the tutorial was great)
It's macos, alacritty with monaco font.
nice, thank you so much !
You are welcome!
How can I check my errorSelector, I mean how to change http status and replace response body
You need to change it on backend or write tests.
Posts is a confusing name for a component... Maybe Articles? Anyway... Very informative!
Thank you
Thanks so much!!!
You're welcome!
simple awesome
Thanks a lot!
Danke!
Thank you so much for your support. It means a lot to me!
10/10
Thanks!
Cool!
Thanks
where is animations video?
Here th-cam.com/video/8BatUQYtMlY/w-d-xo.html
thank's!!!
You're welcome!
That was overwhelming tbh
I feel your pain
Damn, coming from Vuex state management, this sht is confusing to understand
Life is pain
Bro next time use VSC we can't understand what you doing
Ok next time
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
That's very complicated.
Life is pain
Great, now I hate Angular even more.
Money fixes this problem
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.
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?
Check your state in redux devtools. if it is correct the problem is in selector.
NOPE.
To be honest It's hard to remember+implement all these stuff while working.Learning curve is hard for anyone! THIS technology surely diminish
I agree but still it is the most popular state solution.