Angular “Async” Pipe

Photo by Iñaki del Olmo on Unsplash

Nasıl ki 2x2=4 ise Angular’da subscription = memory leak tir. Bununla ilgili çözümler ararken ilk karşılaşacağımız konulardan birisi “async pipe” bir çoğumuzun varlığından bile haberdar olmadığı ya da unuttuğu bir şeydir.

Tabi “async pipe” konusuna gelene kadar, rxjs içerisinden take, takeUntil, takeWhile gibi operatörlere de mutlaka göz atmışızdır.

“Hayır ben bunların hiç birinden haberdar değilim” diyorsanız şunu hatırlatmakta fayda var.

unsubscribe is a must! (abonelikten çıkmak bir zorunluluktur!)

Observable bir nesnenin içerisinde bulunan veriyi almak ve HTML de kullanmak için yöntemlerden birisi subscription dır. Şimdi “async pipe” ile deneyelim.

export class AppComponent {
     name$ = new BehaviorSubject<string>('Lorem');
     constructor() {}
}

name adında bir property miz olsun ve değerini Observable içerisinde tutalım. Bu değer HTML içerisinde kullanmak için aşağıdaki şekilde bir kod yazdığımızda

<div>
   {{ name$ }}
</div>

Sonuç böyle olacaktır.

Ancak async pipe ile kullandığımızda:

<div>
    {{ name$ | async }}
</div>

Veriyi olduğu gibi alırız.

Pirimitif tipler için bu kullanım güzel ancak Observable içeisinde bir dizi (Array) ya da nesne (Object) varsa?

export class AppComponent {
     user$ = new BehaviorSubject();
     constructor() {
          this.user.next({
               firstName: 'Lorem',
               lastName: 'Ipsum',
          });
     }
}

Şimdi HTML içerisine usernesnemizin property lerini yazdıralım.

<div>
{{ user$ | async }}
</div>

Yukarıdaki şekilde nesnemiz [object Object]olarak görünecektir. Bu noktada *ngIf yardımımıza koşar.

<div *ngIf="user$ | async as user">
{{ user.firstName}} {{ user.lastName}}
</div>

user$ nesnemizi Observable içerisinden user adında dışarı çıkarttık. Aynı işlemi Observable içerisinde bulunan dizi için de yapabiliriz.

Bilmeyenler için araya bir not ekleyelim, user$ ve user farkından bahsedelim. Observable nesne tanımlamalarında key/variable/property name sonuna $ eklenir.

“async pipe” subscription oluşturmuyor mu? Evet oluşturuyor ancak bileşen destroy olduğunda otomatik olarak unsubscribe oluyor. Böylece HTML içerisinde kullanmamız gereken async veriler için subscribe/unsubscribe metodları içerisinde kaybolmuyoruz.

Güzel ama bu tür async verileri TypeScript içerisinde kullanmamız gerekirse ne yapacağız. Bunun için mutlaka subscribe metodunu kullanıyoruz ancak kullanımı azaltmak elimizde; NGRX!

Özellikle, A verisi geldiğinde X işlemini yap ve X işlemi bitince Y işlemini yap gibi alan efekti olan işlemler için NGRX ve NGRX Effects tam da aradığınız şey diyebilirim.

NGRX son versiyonlarında oldukça toparladı. Önceden action, reducer, selector, effect tanımlamak çok zahmetli ve karmaşıktı. Şimdi oldukça basitleşmiş, kullanmanızı tavsiye ederim.

Daha önce hiç NGRX tecrübesi olmayan bir arkadaşıma, NGRX’in genel yapısını ve temellerini anlattım ve ardından kurduğu cümle aşağıdaki gibi oldu.

“Bunca zaman hamallık yapmışım.”