💥 Avoiding Angular duplicate HTTP requests with the RxJs shareReplay operator

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

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

  • @reknaanker4220
    @reknaanker4220 4 года назад +15

    From what I experienced, I think it is important the make the distinction between share and shareReplay. The important distinction is what happens for late subscribers (subscribing after the emission = request has occurred).
    shareReplay will emit the last value when a late subscriber subscribes
    share will emit the same value without repeating the request for all early subscribers. Late subscribers will only receive future emissions.
    so shareReplay can be best used for caching data that should only be retrieved once and shared between multiple components (whenever they are created even in the future after first emission)
    share can be best used for preventing multiple requests when you subscribe multiple times to the observable (probably in the same view).

    • @baluditor
      @baluditor 3 года назад

      I was trying to understand the difference, but could not wrap my head around it until I found your comment. Thank you for this clear explanation.

  • @codefinity
    @codefinity 3 года назад

    Excellent. I actually even got a better understanding of the `rxjs` `map` that was shown towards the beginning. I really like how he doesn't gloss over anything. Basically each line is explained in great detail.

  • @cp8245
    @cp8245 3 года назад

    Best explanation on observable.. Thank you sir

  • @sourishdutta9600
    @sourishdutta9600 4 года назад +3

    This one is really great!! Thanks and Post more videos like this Sir :)

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

    I never use async pipe because it trigger subscribing on the html wherever you add the pipe. The data is rarely used once only in template in real world

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

      From what I learned it's best practice to always use the async pipe because it will take care of subscribing and unsubscribing automatically.

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

    I wonder what happens if new courses are added. From my understanding page won't be updated if sharedReplay is used isn't it ?

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

    I have one question sir if we are using this shareReplay for caching data it fine for normal cases but if any new data has been added and you want to refresh the list clicking on a button suppose then how it will refresh caz shareReplay will share the previous state right then what to do in that scenarios!? Thank you so much .

  • @robertotomas
    @robertotomas 4 года назад +3

    The problem that you’re solving is really caused by the use of async. At the heart of the issue is that the template is directly controlling behavior, ie it is mvvm not mvc

    • @vishals50
      @vishals50 4 года назад

      Async pipe looks charming but it's a wild operator.

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

      @@vishals50 I think a good practice when using async pipe is to first do this on a wrapping element:
      *ngIf="data$ | async as data"
      ... then safely use data variable without causing the issue in the video.

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

      ​@@JBuchmannThank you for this 😃. I saw the wrapping element as you mentioned without knowing why for quite a long time. I ignore using it and ends up facing issue like this video. Now with that wrapping, my problem was solved.

  • @karanjotsandhu237
    @karanjotsandhu237 4 года назад

    Hello Vasco,can we use share operator in place of sharereplay operator in this example?

  • @lukalukaluka7000
    @lukalukaluka7000 3 года назад

    Is there a way to omit shareReplay operator. For example, we edited course data in a simple form, changed it in the database and now we want to repeat API call?

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

    Thanks for this. However how can I prevent API call to be triggered twice in case of error? E.g. when API returns Internal Server error, call is made second time again.

  • @asterozo
    @asterozo 3 года назад +1

    Solution at 7:00

  • @maurov2104
    @maurov2104 4 года назад +1

    htp

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

    Sweeet!