Angular State Management Using NgRx in 2021 : Login flow Tutorial (Redux / Rxjs)

Рет қаралды 18,504

2 жыл бұрын

This tutorial walks you through NgRx (Redux) concepts and demonstrates how to integrate NgRx in an Angular 13 webapp, thereby leveraging the state management to develop a User Login flow.
State management is a powerful concept that allows Angular apps to be fast, and at the same time make it easier for the codebase to scale.
Please like and share this video, and subscribe to my channel if you find this video helpful. Let me know in the comments below if there is anything specific that you'd like me to make a video on.
Useful Links:
NgRx : ngrx.io/docs
Github Repo (Branch: tutorial-ngrx-1): github.com/techtacious/market...
Generating Angular API library using OpenApi Codegen: • Generate OpenApi (Swag...

Пікірлер: 57

@saiful_70 Жыл бұрын

implementing ngrx for first time, this video helps me a lot.

@techtacious Жыл бұрын

Glad it helped! Thanks for watching! :)

@soberstudy160 6 ай бұрын

An older video but helpful to me to refresh ngrx state, thanks

@techtacious 5 ай бұрын

Glad I could help.

@jacobokomo6077 4 ай бұрын

Thank you so much man, you explain this with a lot of passion & efforts. With 2 YOE in Angular, for the very first time you made me understand NgRX State management. I just finally wrapped my head around it. You earned my like & subscription as well. Kindly do continue making more of the same, your journey to your first 1K Subs is on the way.

@techtacious 4 ай бұрын

I'm glad I could help man. Thanks a ton for your kind words! I have been inactive with my content lately but comments like yours have motivated me to make more content. Please feel free to let me know if there's any particular topics you'd like me to make videos on.

@MurshidAtassi Жыл бұрын

Thank you so much for this video. Just learning about Angular. This was the missing piece to wrap my head around authentication in a modern Angular application. Please continue with more such useful content! Much appreciated:)

@techtacious Жыл бұрын

Thank you for watching! Glad I could help. :)

@harshgupta0227 2 жыл бұрын

great explanation!! Please keep more of these tutorials coming.. Waiting for more Angular content from you :)

@techtacious 2 жыл бұрын

Thank you! I'll certainly start producing content more actively. Please stay tuned :)

@techtacious Жыл бұрын

@Harsh Gupta I have a new video up on creating an Angular Library in 2022. I think you might like watching that. Definitely better fonts :) kzfaq.info/get/bejne/etCZbM9_rbzOZp8.html

@manishjainconfidosoft1005 2 жыл бұрын

Amazing! In one go, I understood, what NGRX is all about. It looks very simple and I am going to use in my next ng project.

@techtacious 2 жыл бұрын

I'm glad I could help. Good luck and have fun with Ngrx :).

@techtacious Жыл бұрын

Hi @ManishJain Confidosoft, I have a new video up on creating an Angular Library in 2022. I think you might like watching that. Definitely better fonts :) kzfaq.info/get/bejne/etCZbM9_rbzOZp8.html

@JoseMartinez-zd7dp 2 жыл бұрын

Damn! You have explained it so simple and easy, thanks for the video it helped me a lot. 💪

@techtacious 2 жыл бұрын

I'm glad I could help. :) Please feel free to post suggestions for topics you'd like to see on this channel. Happy coding!

@techtacious Жыл бұрын

Hi @Jose Martinez, I have a new video up on creating an Angular Library in 2022. I think you might like watching that. Definitely better fonts :) kzfaq.info/get/bejne/etCZbM9_rbzOZp8.html

@khaledamirat7933 2 жыл бұрын

You explination was so amazing, it was so simple, as it's nothing, thank you verry much, for that, i'll use your tutroial as my reference, thanks again

@techtacious 2 жыл бұрын

Thank you! I'm glad I could help. Please feel free to let me know of any other topics you'd like tutorials on. Happy coding!

@bluetoothera9580 2 жыл бұрын

I see only two videos on your channel, Content is really good !! Please keep up with pace...

@techtacious 2 жыл бұрын

Thanks a lot! I have been caught up with some personal events lately but I'll be creating more content soon. Please stay tuned :).

@techtacious Жыл бұрын

Hi @Bluetooth Era, I have a new video up on creating an Angular Library in 2022. I think you might like watching that. kzfaq.info/get/bejne/etCZbM9_rbzOZp8.html

@lindermannla 2 жыл бұрын

Nice tutorial!

@techtacious 2 жыл бұрын

Thank you!

@techtacious Жыл бұрын

Hi, I have a new video up on creating an Angular Library in 2022. I think you might like watching that. kzfaq.info/get/bejne/etCZbM9_rbzOZp8.html

@arielunanue4354 2 жыл бұрын

Great video. Do you have another one showing how to add "loading" indicators while the effect is being executed? To be able to show an indicator to the user, disable the button, etc.

@techtacious 2 жыл бұрын

Thank you! I have not been able to create much content lately but I will be happy to make a video on UI state management. Stay tuned :).

@trustingod0 2 жыл бұрын

Great Video !!! I have a quick question. I noticed that you used a promise as the return value for the Login Method. I was wondering why did you use a promise as opposed to an observable? Thanks !!!

@techtacious 2 жыл бұрын

Thank you! I'm glad I could help. Since we are not returning anything from the login function in the component, we don't need a return type there. It is more like an async void function. We simply dispatch an action in there and don't return anything. A consumer of that function does not (and should not) need to wait for the login function to finish executing. Please feel free to let me know of any other topics you'd like tutorials on. Happy coding!

@bluetoothera9580 2 жыл бұрын

Can you please create a video on how to manage the login state using ngrx for multi tenant user application with an Okta login integration.

@techtacious 2 жыл бұрын

Thanks for the comment! I haven't worked with Okta but I'll try my best to find time, check out Okta, and make a video on it.

@MYM861 Жыл бұрын

Hi, great video. Thank you! I have one question. When i reload my page in "logged in" state. The Log in button is visible for a second. I understand this is due to the async taking time to complete but how can this be solved in a nice way? Thanks!

@techtacious Жыл бұрын

Hi Nattmackan, thanks for watching the video and thank you for your feedback! Ideally, when a user is logged in, the authentication state should be persisted in local storage. That way, if you log in once and reload the app, you wouldn't see the Log-in button. However, with a proper authentication system in place, you would want to validate the persisted auth token to make sure it's still valid. The implementation of that would depend on your auth system but ideally it would include communication with your backend auth service to make sure that the token is valid. If the token is deemed invalid / expired, you would dispatch the Logout redux action that would change the UI state and the Log-in button would appear again.

@Ellie-dx3hg Жыл бұрын

How do I launch the marketplace-server API?

@techtacious Жыл бұрын

It has not been linked with Nx properly in my project yet. You may navigate to the marketplace-server directory "cd apps/marketplace-server" and run "yarn run dev". Please note that you will need to connect to a Mongo server and set its URL with credentials in a .env file as MONGO_URL=.

@fired_developer Жыл бұрын

Please increase the Editor fonts size.. Thanks !

@techtacious Жыл бұрын

Thanks for the feedback. Yes the font-size has been fixed in my other videos.

@mohamadnourbader1068 3 ай бұрын

the video is good. but i could not complete it because the font on the screen was so small, and I couldn't see the code well.

@techtacious Ай бұрын

Thanks for watching. It was my first video and I didn't have the best font size figured out yet.

@sahoo.subrat 2 жыл бұрын

nice , but please increase the font size of the vscode

@techtacious 2 жыл бұрын

Thank you for the feedback! I will keep that in mind for the future videos :) .

@sahoo.subrat 2 жыл бұрын

@@techtacious Thanks

@techtacious Жыл бұрын

@@sahoo.subrat Hi, I have a new video up on creating an Angular Library in 2022. I think you might like watching that. kzfaq.info/get/bejne/etCZbM9_rbzOZp8.html

@mkmobilefanvideos6311 9 ай бұрын

What happens when you refresh the page? Are the token and user data still stored in the ngRx store?

@techtacious 8 ай бұрын

When you refresh the page, the ngRx store is reset. That is because in this video, I do not show how to *persist* the store in local storage. If you want to retain the state, you can update your store implementation to "save" the state to local storage when it's changed.

@mkmobilefanvideos6311 8 ай бұрын

@@techtacious yep, got it, thanks!

@mysuperemecy 2 жыл бұрын

I skipped this beautiful video because fonts were too small

@techtacious 2 жыл бұрын

I recognize that problem with the video. I'll make sure to avoid it in my future videos. Thanks for the feedback! :)

@techtacious Жыл бұрын

Hi, I have a new video up on creating an Angular Library in 2022. I think you might like watching that. Definitely better fonts :) kzfaq.info/get/bejne/etCZbM9_rbzOZp8.html

@roman-tp6sd Жыл бұрын

the size of font is small... great video

@techtacious Жыл бұрын

Hi, thanks for your comment! The fonts will be bigger and better in the other videos :).

@roman-tp6sd Жыл бұрын

@@techtacious my eyes will love you

@techtacious Жыл бұрын

@@roman-tp6sd I have a new video up on creating an Angular Library in 2022. I think you might like watching that. Definitely better fonts :) kzfaq.info/get/bejne/etCZbM9_rbzOZp8.html