MergeMap, Map, Take, Filter
Yazılım işine gönül verenler iyi bilir ki bu meslek biraz nankördür. Siz bir konuyla ilgilenmediğiniz vakit o da sizi terkeder.
Değerli okurlar, çok sık kullanılmadığı taktirde anlaşılması güçleşen ve özellikle kullanılmadığı zaman çok çabuk unutulan RxJs aslında çok önemli faydaları olan bir kütüphanedir.
RxJs nedir nerelerde kullanılır gibi teorik bilgilerden ziyade (bu konular zaten teorik olarak biliniyor) konuya direk operatörlerin gerçek hayatta ki kullanımı ile girerek kısa ve özet bilgiler vermek istiyorum. Haydi başlalayalım…
Bu operatörleri anlamak için observable kavramını, ne işe yaradığını iyi özümsemek gerektiği kanaatindeyim. Bu yazıda bu kavramın bilindiği kabul edeceğim.
Observable kavramını şöyle bir örnekle pekiştirelim. Bir fabrikayı gözünüzün önünde canlandırın. Bir hammadde var, hammaddeyi ürüne dönüştüren makina var ve paketleme işlemi yapan işçiler var.
Sizin nihai hedefiniz yani elde etmek istediğiniz şey üründür. Bu ürünler makinalardan çıkıp pakete girmektedir. Bu akışa observable, işçiye observer diyebiliriz. İşçi paketleme işlemini yapabilmek için makinadan ürün gelmesini beklemektedir (subscription).Ürün geldikçe bunu son kullanıcının kullanacığı hale getirmektedir.
İşçi mola verdiğinde makinayı durdurabilir (unsubscription) ve sonrasında tekrar başlatabilir(subscription). Ürünün makinanın içinde geçirdiği evreleri ise RxJs operatörleri ile ilişkilendirebiliriz.
MergeMap,Map,Take,Filter
Map işlemi aslında bir dönüştürme operasyonudur. Yani yukardaki benzetmeden yola çıkarsak hammaddenin makina içinde ki evrimi diyebiliriz. Biz de yazılımda ham verileri alıp “map” operatörü ile değişikliğe uğratıp son kullanıcıya sunabiliriz.
Örnek olması açısından https://jsonplaceholder.typicode.com/posts üzerindeki dataları çekip son kullanıcıya içinde “dolorem” kelimesi geçen postların 5 ini sadece “title” ve “body” şeklinde göstereceğimizi düşünelim. Bu durumda ham olarak gelen veriyi dönüştürmemiz gerekecektir.
Öncelikle verilerimizi ham hali ile çekelim.
getPosts() {
this.http
.get<any[]>('https://jsonplaceholder.typicode.com/posts')
.subscribe((data) => {
console.log(data);
});
}Bu durumda verilerimiz bir yığın halinde gelecektir.
Şimdi geldik asıl meseleye; yukarda bahsedilen istekleri işleyebilmek için map, mergemap, take ve filter operatörlerini bir arada kullanacağız. Kriterlerimiz;
Son kullanıcı userId ve id propertylerini görmeyecek
Sadece 5 post gelecek
İçinde “dolorem” kelimesi geçen postlar gelecek.
Öncelikle userId ve id lerin gelmemesi için map ile ham veriyi işleyeceğiz. “Map” operatörü bir observable nesneyi dönüştürmek amacıyla kullanılır ancak bize gelen verinin bir yığın olduğunu düşündüğümüzde (any[] tipinde bir veri bekliyoruz) map operatörü işimize yaramıyor.
Bu durumda devreye mergemap giriyor. Mergemap ile gelen akışları birleştirerek tek bir observable nesne elde edip onu değişikliğe uğratıyoruz. (Birleştirme operatörü sadece mergemap değildir, konumuz bu olmadığı için detaylarına girmiyorum.)
Bunu daha iyi açıklamak için şöyle örneklendirebiliriz. Bir e-ticaret işi ile uğraşıyorsunuz ve üreticiden çok sayıda ürün aldığınızı ve ürünlerinizi paketleyip kargolayacağınızı düşünelim.
Üretici dükkanınıza birkaç kamyon dolusu ürünü getiriyor ve kapıda sizi bekliyor (observable nesnemiz gelmeye başladı). Sizde bu ürünlerin hepsini deponuza indiriyorsunuz(mergemap).
Artık ürünleriniz ayrı ayrı kamyonlarda değilde deponuzda duruyor. Sizde deponuzdan ürünleri tek tek alıp paketlemeye başlıyorsunuz(map). Ardından son kullanıcınız sipariş veriyor ve kargoluyorsunuz(subscription).
Bizim burada paketleme işlemimize denk gelen şey ise yukarda bizden istenilen kriterler gibi düşünebiliriz. Şimdi kod kısmına geçebiliriz.
getPosts() {
this.http
.get<any[]>(‘https://jsonplaceholder.typicode.com/posts')
.pipe(
mergeMap((val) => from(val)),
map((val) => ‘Title: ‘ + val.title + ‘\n’ + ‘Body: ‘ + val.body)
)
.subscribe((data) => {
console.log(data);
});
}Görüldüğü üzere mergemap ile nesnelerimizi birleştirerek tek bir observable nesne geri döndürdük ve “map” operatörü ile sadece title ve body kısımlarını göstermiş olduk. Şimdi gelelim içinde “dolorem” kelimesi geçen 5 postu bulmaya.
getPosts() {
this.http
.get<any[]>(‘https://jsonplaceholder.typicode.com/posts')
.pipe(
mergeMap((val) => from(val)),
map((val) => ‘Title: ‘ + val.title + ‘\n’ + ‘Body: ‘ + val.body),
filter((val) => val.includes(‘dolorem’)),
take(5)
)
.subscribe((data) => {
console.log(data);
});
}Kod bloğumuzu incelersek; “filter” operatörü ile daha önce “map”lenen verilerimizi filtreledik. Filtrelenen verilerden ise “take” operatörü yardımıyla 5 tanesini çekmiş olduk.
RxJs bu gibi durumlarda inanılmaz faydalı bir kütüphanedir. Doğru yerde doğru zamanda kullanıldığında büyük kolaylıklar sağlar.
Bir çok RxJs operatörü bulunmakta, ihtiyaca göre kullanıldıkça, zihinlerde yer ediniyor ve öğreniliyor.
Ben bu yazımızda sık kullanmış olduğum operatörlerden bir kaçını sizlere anlatmaya çalıştım. Umarım faydalı olur.
Sağlıcakla kalın…