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

Поделиться
HTML-код
  • Опубликовано: 19 дек 2024

Комментарии • 58

  • @saiful_70
    @saiful_70 Год назад +3

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

    • @techtacious
      @techtacious  Год назад

      Glad it helped! Thanks for watching! :)

  • @jacobokomo6077
    @jacobokomo6077 9 месяцев назад +2

    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
      @techtacious  9 месяцев назад +1

      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
    @MurshidAtassi Год назад +2

    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
      @techtacious  Год назад

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

  • @soberstudy160
    @soberstudy160 10 месяцев назад +1

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

  • @harshgupta0227
    @harshgupta0227 2 года назад +5

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

    • @techtacious
      @techtacious  2 года назад

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

    • @techtacious
      @techtacious  2 года назад

      @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 :)
      ruclips.net/video/Dji9lNHVj6k/видео.html

  • @manishjainconfidosoft1005
    @manishjainconfidosoft1005 2 года назад +4

    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
      @techtacious  2 года назад

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

    • @techtacious
      @techtacious  2 года назад

      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 :)
      ruclips.net/video/Dji9lNHVj6k/видео.html

  • @bluetoothera9580
    @bluetoothera9580 2 года назад +1

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

    • @techtacious
      @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
      @techtacious  2 года назад

      Hi @Bluetooth Era, I have a new video up on creating an Angular Library in 2022. I think you might like watching that.
      ruclips.net/video/Dji9lNHVj6k/видео.html

  • @JoseMartinez-zd7dp
    @JoseMartinez-zd7dp 2 года назад +5

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

    • @techtacious
      @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
      @techtacious  2 года назад

      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 :)
      ruclips.net/video/Dji9lNHVj6k/видео.html

  • @khaledamirat7933
    @khaledamirat7933 2 года назад +1

    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
      @techtacious  2 года назад +1

      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!

  • @community7757
    @community7757 11 часов назад

    This video is gold, it has made me see many things I didn't understand and I thank you very much. I have a question, how can I implement this on a microfrontend? In my case I work in a project which has a login/registration app and another main app that reads the cookie saved by the login project to access the user information. Could you give me some key to adapt your solution to my project? Thank you again and I hope you are well

  • @Ellie-dx3hg
    @Ellie-dx3hg 2 года назад +2

    How do I launch the marketplace-server API?

    • @techtacious
      @techtacious  2 года назад

      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=.

  • @bluetoothera9580
    @bluetoothera9580 2 года назад +1

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

  • @trustingod0
    @trustingod0 2 года назад +1

    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
      @techtacious  2 года назад +1

      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!

  • @MYM861
    @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
      @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.

  • @arielunanue4354
    @arielunanue4354 2 года назад +1

    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
      @techtacious  2 года назад +1

      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 :).

  • @mkmobilefanvideos6311
    @mkmobilefanvideos6311 Год назад

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

    • @techtacious
      @techtacious  Год назад

      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
      @mkmobilefanvideos6311 Год назад

      @@techtacious yep, got it, thanks!

  • @fired_developer
    @fired_developer Год назад

    Please increase the Editor fonts size.. Thanks !

    • @techtacious
      @techtacious  Год назад +1

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

  • @sahoo.subrat
    @sahoo.subrat 2 года назад +2

    nice , but please increase the font size of the vscode

    • @techtacious
      @techtacious  2 года назад +2

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

    • @sahoo.subrat
      @sahoo.subrat 2 года назад +3

      @@techtacious Thanks

    • @techtacious
      @techtacious  2 года назад +1

      @@sahoo.subrat Hi, I have a new video up on creating an Angular Library in 2022. I think you might like watching that.
      ruclips.net/video/Dji9lNHVj6k/видео.html

  • @lindermannla
    @lindermannla 2 года назад +1

    Nice tutorial!

    • @techtacious
      @techtacious  2 года назад

      Thank you!

    • @techtacious
      @techtacious  2 года назад

      Hi, I have a new video up on creating an Angular Library in 2022. I think you might like watching that.
      ruclips.net/video/Dji9lNHVj6k/видео.html

  • @mohamadnourbader1068
    @mohamadnourbader1068 7 месяцев назад

    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
      @techtacious  6 месяцев назад

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

  • @roman-tp6sd
    @roman-tp6sd 2 года назад +1

    the size of font is small... great video

    • @techtacious
      @techtacious  2 года назад +1

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

    • @roman-tp6sd
      @roman-tp6sd 2 года назад

      @@techtacious my eyes will love you

    • @techtacious
      @techtacious  2 года назад

      @@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 :)
      ruclips.net/video/Dji9lNHVj6k/видео.html

  • @mysuperemecy
    @mysuperemecy 2 года назад +1

    I skipped this beautiful video because fonts were too small

    • @techtacious
      @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
      @techtacious  2 года назад

      Hi, I have a new video up on creating an Angular Library in 2022. I think you might like watching that. Definitely better fonts :)
      ruclips.net/video/Dji9lNHVj6k/видео.html

  • @dumidupramith3881
    @dumidupramith3881 2 года назад

    very hard to read the code bro

    • @techtacious
      @techtacious  2 года назад

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

  • @pritamnilroy3168
    @pritamnilroy3168 2 года назад +1

    Zoom in ur VS code ..

    • @techtacious
      @techtacious  2 года назад +2

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