From 5d9d231c34c7bfb2046574cb149b8586bd9bd013 Mon Sep 17 00:00:00 2001 From: bdomzalski Date: Fri, 3 Oct 2025 11:06:09 +0200 Subject: [PATCH] =?UTF-8?q?[2025-10-03]=20Czy=20wiesz,=20=C5=BCe=20za=20po?= =?UTF-8?q?moc=C4=85=20operatora=20shareReplay=20mo=C5=BCesz=20cache'owa?= =?UTF-8?q?=C4=87=20dane=20z=20observable=3F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...lay-mozesz-cache-owac-dane-z-observable.md | 60 ++++++++++++++++++ .../thumbnail.webp | Bin 0 -> 10734 bytes 2 files changed, 60 insertions(+) create mode 100644 _posts/pl/2025-10-03-czy-wiesz-ze-za-pomoca-operatora-sharereplay-mozesz-cache-owac-dane-z-observable.md create mode 100644 assets/img/posts/2025-10-03-czy-wiesz-ze-za-pomoca-operatora-sharereplay-mozesz-cache-owac-dane-z-observable/thumbnail.webp diff --git a/_posts/pl/2025-10-03-czy-wiesz-ze-za-pomoca-operatora-sharereplay-mozesz-cache-owac-dane-z-observable.md b/_posts/pl/2025-10-03-czy-wiesz-ze-za-pomoca-operatora-sharereplay-mozesz-cache-owac-dane-z-observable.md new file mode 100644 index 000000000..363c0b0e3 --- /dev/null +++ b/_posts/pl/2025-10-03-czy-wiesz-ze-za-pomoca-operatora-sharereplay-mozesz-cache-owac-dane-z-observable.md @@ -0,0 +1,60 @@ +--- +layout: post +title: Czy wiesz, że za pomocą operatora shareReplay możesz cache'ować dane z observable? +description: "" +date: 2025-10-03T08:00:00+01:00 +published: true +didyouknow: false +lang: pl +author: ptatarski +image: /assets/img/posts/2025-10-03-czy-wiesz-ze-za-pomoca-operatora-sharereplay-mozesz-cache-owac-dane-z-observable/thumbnail.webp +tags: +- angular +- rxjs +- observable +--- + +Często zdarza się, że nie chcemy za każdym razem ponownie wykonywać całej logiki z danego *Observable* — +zamiast tego wolimy przechować jego wynik w pamięci. W Angularze (i ogólnie w RxJS) możemy to zrobić za pomocą operatora **`shareReplay`**. + +## Czym jest shareReplay? +Operator `shareReplay` (tak jak operator `share`) pozwala na konwersję z *cold* do *hot* observable, +tak aby każda subskrypcja korzystała z tej samej emisji observable. Dodatkowo dane są zapisywane w wewnętrznym **ReplaySubject** +(w przeciwieństwie do operatora share), przez co każda nowa subskrypcja dostaje ostatnią wyemitowaną wartość (lub wartości jeżeli `bufferSize > 1`). + +## Przykład użycia +W przykładzie poniżej generujemy losową liczbę. Normalnie przy każdej subskrypcji otrzymalibyśmy nowy wynik, +ale dzięki `shareReplay` obie subskrypcje dostają dokładnie tę samą wartość. +```typescript +const source$: Observable = of(Math.round(Math.random() * 1000)) + .pipe(shareReplay()); +source$.subscribe((x: number) => console.log('s1: ', x)); +source$.subscribe((x: number) => console.log('s2: ', x)); +``` +W efekcie w konsoli pojawi się ta sama liczba w obu subskrypcjach, np.: +```shell +s1: 742 +s2: 742 +``` +## Opcje konfiguracji +Operator `shareReplay` posiada także dodatkowe opcje do skonfigurowania. +- `bufferSize` - określa wielkość wewnętrznego ReplaySubject (domyślnie przechowuje ostatnią wartość), +- `refCount` - określa, czy w momencie, gdy liczba subskrybentów wyniesie 0 shareReplay ma odsubskrybować się od źródłowego observable, co spowoduje wyczyszczenie cache (domyślnie false), +- `windowTime` - ograniczenie czasu przechowywanych wartości (domyślnie nie ogranicza). + + +### Przykład z dodatkowymi opcjami konfiguracji +Załóżmy, że chcemy cache’ować więcej niż jedną wartość i dodatkowo kontrolować czas ich przechowywania. +```typescript +shareReplay({ bufferSize: 3, refCount: true, windowTime: 500 }) +``` +- zostaną umieszczone w buforze 3 ostatnie wartości, +- każda z osobna będzie miała czas życia ustawiony na pół sekundy, +- w momencie, gdy nie będzie żadnej aktywnej subskrypcji, bufor zostanie wyczyszczony. + +### Przydatne linki +[StackBlitz - Przykład interaktywny](https://stackblitz.com/edit/rxjs-ewsunmdz?file=index.ts) + +[Rxjs - Oficjalna dokumentacja](https://rxjs.dev/api/index/function/shareReplay) + +[Github - Kod źródłowy](https://github.com/ReactiveX/rxjs/blob/b25db9f369b07f26cf2fc11714ec1990b78a4536/src/internal/operators/shareReplay.ts#L26-L37) \ No newline at end of file diff --git a/assets/img/posts/2025-10-03-czy-wiesz-ze-za-pomoca-operatora-sharereplay-mozesz-cache-owac-dane-z-observable/thumbnail.webp b/assets/img/posts/2025-10-03-czy-wiesz-ze-za-pomoca-operatora-sharereplay-mozesz-cache-owac-dane-z-observable/thumbnail.webp new file mode 100644 index 0000000000000000000000000000000000000000..095819f8410b2bb4587b50d1c08e774eca6e24e8 GIT binary patch literal 10734 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