Angular “Async” Pipe

Hıdır Volkan Sönmez
Mar 28 · 2 min read
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.”

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store