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!
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
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
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?
Hi, it's Vim. Here are my videos about it ruclips.net/video/j6uqOvTRq6I/видео.html ruclips.net/video/YrLiugDhCuk/видео.html ruclips.net/video/Xa4aOOB7XZo/видео.html
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
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.
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.
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
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.
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
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?
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
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
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?
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 ruclips.net/video/hMSTO4cpPaQ/видео.html ruclips.net/video/vUEaDo6aXic/видео.html ruclips.net/video/ghmJ1CwiShw/видео.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.
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?
![I.N "HALLUCINATION" | [Stray Kids : SKZ-PLAYER]](http://i.ytimg.com/vi/n5B5q1Hwt_U/mqdefault.jpg)
WATCH NEXT: Angular with NgRx - Building Angular Project From Scratch - ruclips.net/video/vcfZ0EQpYTA/видео.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! 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!
Glad it was helpful!
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!
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!
Danke!
Thank you so much for your support. It means a lot to me!
18:10 great explanation - this solved my issue
Glad to hear that!
Best intro to Ngrx i've seen so far! :)
Wow, thanks!
Very well explained with great examples
Glad you liked it!
Your videos are very helpful to understand the concept in simple ways
Glad to hear that
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!
Thank you, very simple and straightforward!
Glad it was helpful!
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!
Excuse me ! Its Clever from East Africa. This is surely amazing
Thank you!
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!
I have been waiting for this course. Thanks for much.
You are welcome!
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 😀
Excellently explained! Thank you sir.
Glad it was helpful!
Thanks for this amazing structured and well-explained tutorial. Helped me a lot in understanding the basic concepts of NgRx! :)
Glad it helped!
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 man, You are a great teacher for me
Glad to hear that!
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
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!
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.
❤ thank you so much buddy, I'm from India
You are welcome!
Thank you for the video.
You're welcome!
Hello, please what IDE do you make use of?
Hi, it's Vim. Here are my videos about it
ruclips.net/video/j6uqOvTRq6I/видео.html
ruclips.net/video/YrLiugDhCuk/видео.html
ruclips.net/video/Xa4aOOB7XZo/видео.html
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
Hey, best regards, would you please make a course for NGXS state manager too, please?
I will add it to the list of ideas.
Thats super useful video for me! Thank you a lot, man
You are welcome!
You made it look easy, thank you!
You're welcome!
Do I need meta-reducers to make it work?
No
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
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.
Это супер, спасибо за то, что ты делаешь
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
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.
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.
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.
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
This is a very helpful Video, thanks a lot!
Glad it was helpful!
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.
Great work.
Thanks
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.
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
Thank you for your video. 🙂
You're welcome 😊
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.
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!
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
Is this a real human or some kindve new ai human? Great video!
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.
ruclips.net/video/YrLiugDhCuk/видео.html
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.
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.
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!
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
ruclips.net/video/hMSTO4cpPaQ/видео.html
ruclips.net/video/vUEaDo6aXic/видео.html
ruclips.net/video/ghmJ1CwiShw/видео.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.
Great tutorial thanks
You're welcome!
The Best
Thanks!
Thanks again for this one.
My pleasure!
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.
This is great!
Thank you!
awesome tutorial :D you are the best
Thanks! 😃
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.
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
Thanks so much!!!
You're welcome!
nice, thank you so much !
You are welcome!
Posts is a confusing name for a component... Maybe Articles? Anyway... Very informative!
Thank you
simple awesome
Thanks a lot!
where is animations video?
Here ruclips.net/video/8BatUQYtMlY/видео.html
Cool!
Thanks
thank's!!!
You're welcome!
10/10
Thanks!
That was overwhelming tbh
I feel your pain
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
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
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.