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 )
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
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
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.
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
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.
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?
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'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 :(
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
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
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.
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?
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
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.
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.
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
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?
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
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.
Great work, thanks!
Thank you so much for your support. It means a lot to me!
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!
Great insights, everything ngrx explained in under half an hour
Thank you!
Danke!
Thank you so much for your support. It means a lot to me!
Best intro to Ngrx i've seen so far! :)
Wow, thanks!
The best video on the topic. Appreciation.
Glad you think so!
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
Your videos are very helpful to understand the concept in simple ways
Glad to hear that
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
18:10 great explanation - this solved my issue
Glad to hear that!
Very well explained with great examples
Glad you liked it!
I have been waiting for this course. Thanks for much.
You are welcome!
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!
Excuse me ! Its Clever from East Africa. This is surely amazing
Thank you!
Excellently explained! Thank you sir.
Glad it was helpful!
Thank you, very simple and straightforward!
Glad it was helpful!
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 😀
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!
Thats super useful video for me! Thank you a lot, man
You are welcome!
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 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
Thanks, never disappoints
You are welcome!
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
This is a very helpful Video, thanks a lot!
Glad it was helpful!
You made it look easy, thank you!
You're welcome!
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!
Это супер, спасибо за то, что ты делаешь
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.
❤ thank you so much buddy, I'm from India
You are welcome!
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.
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
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.
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 anyone explain when to choose angular over react?
When you have angular jobs in your city and they are paying more than for react
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
Great work.
Thanks
awesome tutorial you made thing so easy Thanks alot
Glad it helped!
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
Thank you for your video. 🙂
You're welcome 😊
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.
Do I need meta-reducers to make it work?
No
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.
Hey, best regards, would you please make a course for NGXS state manager too, please?
I will add it to the list of ideas.
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.
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 tutorial thanks
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
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.
This is great!
Thank you!
Thanks again for this one.
My pleasure!
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.
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
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.
Is this a real human or some kindve new ai human? Great video!
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!
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
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.
Thanks so much!!!
You're welcome!
The Best
Thanks!
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.
awesome tutorial :D you are the best
Thanks! 😃
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.
simple awesome
Thanks a lot!
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
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.
Cool!
Thanks
Posts is a confusing name for a component... Maybe Articles? Anyway... Very informative!
Thank you
where is animations video?
Here th-cam.com/video/8BatUQYtMlY/w-d-xo.html
thank's!!!
You're welcome!
10/10
Thanks!
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
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.
Great, now I hate Angular even more.
Money fixes this problem
NOPE.
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.
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.