RxJS’te Akışları Birleştirme: İleri Düzey Teknikler

RxJS’te Akışları Birleştirme: İleri Düzey Teknikler

Merhaba! RxJS serüvenimizin üçüncü adımında, reactive programlamanın kalbindeki önemli bir konuya, akışların birleştirilmesine dalıyoruz. Birden fazla veri akışını tek bir akışta toplamak, birçok senaryoda gereklidir ve RxJS bize bunu yapmak için güçlü operatörler sunar. Bu makalede, en yaygın kullanılan birleştirme operatörlerini; combineLatest, merge, forkJoin ve zip‘i detaylı olarak inceleyeceğiz. Örneklerle birlikte ilerleyeceğimiz bu yolculukta, RxJS’in gücünü daha iyi kavrayacaksınız.

merge Operatörü: Akışları Birleştirmenin En Basit Yolu

merge operatörü, aldığı tüm akışlardan gelen değerleri tek bir akışta birleştirir. Hangi akıştan hangi sırada değer geldiği önemli değildir; gelen tüm değerler sırayla yeni akışa iletilir. Bu nedenle, eşzamanlı veya birbirinden bağımsız veri kaynaklarını birleştirmek için idealdir.

import { merge, fromEvent, interval } from 'rxjs';

const buttonClick$ = fromEvent(document.getElementById('myButton'), 'click');
const timer$ = interval(1000);

const merged$ = merge(buttonClick$, timer$);

merged$.subscribe(val => console.log(val));

Bu örnekte, buton tıklamaları ve her saniyede tetiklenen bir zamanlayıcı birleştiriliyor. Butona tıklandığında veya zamanlayıcı tetiklendiğinde, değer konsola yazdırılır.

combineLatest Operatörü: Son Değerleri Birleştirme

combineLatest, birden fazla akışın son değerlerini bir araya getirir. Sadece her akıştan en az bir değer geldikten sonra çalışır ve bundan sonra, herhangi bir akışta değer değiştiğinde, tüm akışların son değerleri yeni bir dizi olarak yayılır. Bu, bağımlı veri kaynaklarını senkronize etmek için çok faydalıdır.

import { combineLatest, fromEvent } from 'rxjs';

const input1$ = fromEvent(document.getElementById('input1'), 'input');
const input2$ = fromEvent(document.getElementById('input2'), 'input');

combineLatest([input1$, input2$]).subscribe(([val1, val2]) => {
  console.log('Input 1:', val1.target.value);
  console.log('Input 2:', val2.target.value);
});

Bu örnekte, iki input alanından gelen değerler birleştirilir. Her iki alana da en az bir kez değer girildikten sonra, değerler değiştikçe güncel değerler konsola yazdırılır.

forkJoin Operatörü: Tüm Akışlar Tamamlandığında

forkJoin operatörü ise, yalnızca tüm girdi akışları tamamlandığında sonuçları birleştirir. Eğer bir akış hata üretmişse veya tamamlanmamışsa, forkJoin hata fırlatır. Bu nedenle, bağımsız ama sonucun birleştirilmesini gerektiren işlemler için idealdir. Örneğin, birkaç API çağrısının sonucunu beklerken kullanabilirsiniz.

import { forkJoin, of } from 'rxjs';

const obs1$ = of(1, 2, 3);
const obs2$ = of(4, 5, 6);

forkJoin([obs1$, obs2$]).subscribe(results => console.log(results)); // [ [1,2,3], [4,5,6] ]

zip Operatörü: Akışları Eşleştirip Birleştirme

zip operatörü, girdi akışlarının değerlerini sırayla eşleştirir ve birleştirir. Her akıştan bir değer alır, bunları bir dizi halinde birleştirir ve yayar. Herhangi bir akış bittiğinde, zip operatörü de biter. Bu nedenle, eşleştirilmiş veri işleme için ideal bir operatördür.

import { zip, from } from 'rxjs';

const arr1 = [1, 2, 3];
const arr2 = ['a', 'b', 'c'];

zip(from(arr1), from(arr2)).subscribe(result => console.log(result)); // [1,'a'], [2,'b'], [3,'c']

Bu örnekte, iki diziden gelen değerler sırayla eşleştirilir ve birleştirilir. Sonuç olarak, her bir çift değer konsola yazdırılır.

Sonuç

Bu makalede, RxJS’te akışları birleştirmenin en yaygın dört yolunu inceledik. Her operatörün farklı kullanım senaryoları vardır ve doğru operatörü seçmek, temiz ve okunabilir kod yazmak için önemlidir. Daha fazla bilgi ve örnek için fatihsoysal.com veya RxJS resmi dökümantasyonuna göz atabilirsiniz. Unutmayın, pratik yapmak mükemmelleşmenin anahtarıdır. RxJS ile daha fazla proje geliştirerek bu konuları pekiştirebilirsiniz.

#Etiketler: RxJS, akış birleştirme, combineLatest, merge, forkJoin, zip, reactive programming, javascript, programlama, Fatih Soysal