RxJS’te Ak\u0131\u015flar\u0131 Birle\u015ftirme: \u0130leri D\u00fczey Teknikler<\/p>\n
Merhaba! RxJS ser\u00fcvenimizin \u00fc\u00e7\u00fcnc\u00fc ad\u0131m\u0131nda, reactive programlaman\u0131n kalbindeki \u00f6nemli bir konuya, ak\u0131\u015flar\u0131n birle\u015ftirilmesine dal\u0131yoruz. Birden fazla veri ak\u0131\u015f\u0131n\u0131 tek bir ak\u0131\u015fta toplamak, bir\u00e7ok senaryoda gereklidir ve RxJS bize bunu yapmak i\u00e7in g\u00fc\u00e7l\u00fc operat\u00f6rler sunar. Bu makalede, en yayg\u0131n kullan\u0131lan birle\u015ftirme operat\u00f6rlerini; Bu \u00f6rnekte, buton t\u0131klamalar\u0131 ve her saniyede tetiklenen bir zamanlay\u0131c\u0131 birle\u015ftiriliyor. Butona t\u0131kland\u0131\u011f\u0131nda veya zamanlay\u0131c\u0131 tetiklendi\u011finde, de\u011fer konsola yazd\u0131r\u0131l\u0131r.<\/p>\n Bu \u00f6rnekte, iki input alan\u0131ndan gelen de\u011ferler birle\u015ftirilir. Her iki alana da en az bir kez de\u011fer girildikten sonra, de\u011ferler de\u011fi\u015ftik\u00e7e g\u00fcncel de\u011ferler konsola yazd\u0131r\u0131l\u0131r.<\/p>\n Bu \u00f6rnekte, iki diziden gelen de\u011ferler s\u0131rayla e\u015fle\u015ftirilir ve birle\u015ftirilir. Sonu\u00e7 olarak, her bir \u00e7ift de\u011fer konsola yazd\u0131r\u0131l\u0131r.<\/p>\n Bu makalede, RxJS’te ak\u0131\u015flar\u0131 birle\u015ftirmenin en yayg\u0131n d\u00f6rt yolunu inceledik. Her operat\u00f6r\u00fcn farkl\u0131 kullan\u0131m senaryolar\u0131 vard\u0131r ve do\u011fru operat\u00f6r\u00fc se\u00e7mek, temiz ve okunabilir kod yazmak i\u00e7in \u00f6nemlidir. Daha fazla bilgi ve \u00f6rnek i\u00e7in fatihsoysal.com<\/a> veya RxJS resmi d\u00f6k\u00fcmantasyonuna<\/a> g\u00f6z atabilirsiniz. Unutmay\u0131n, pratik yapmak m\u00fckemmelle\u015fmenin anahtar\u0131d\u0131r. RxJS ile daha fazla proje geli\u015ftirerek bu konular\u0131 peki\u015ftirebilirsiniz.<\/p>\n #Etiketler: RxJS, ak\u0131\u015f birle\u015ftirme, combineLatest, merge, forkJoin, zip, reactive programming, javascript, programlama, Fatih Soysal<\/p>\n <\/body>combineLatest<\/code>, merge<\/code>, forkJoin<\/code> ve zip<\/code>‘i detayl\u0131 olarak inceleyece\u011fiz. \u00d6rneklerle birlikte ilerleyece\u011fimiz bu yolculukta, RxJS’in g\u00fcc\u00fcn\u00fc daha iyi kavrayacaks\u0131n\u0131z.<\/p>\nmerge<\/code> Operat\u00f6r\u00fc: Ak\u0131\u015flar\u0131 Birle\u015ftirmenin En Basit Yolu<\/h2>\nmerge<\/code> operat\u00f6r\u00fc, ald\u0131\u011f\u0131 t\u00fcm ak\u0131\u015flardan gelen de\u011ferleri tek bir ak\u0131\u015fta birle\u015ftirir. Hangi ak\u0131\u015ftan hangi s\u0131rada de\u011fer geldi\u011fi \u00f6nemli de\u011fildir; gelen t\u00fcm de\u011ferler s\u0131rayla yeni ak\u0131\u015fa iletilir. Bu nedenle, e\u015fzamanl\u0131 veya birbirinden ba\u011f\u0131ms\u0131z veri kaynaklar\u0131n\u0131 birle\u015ftirmek i\u00e7in idealdir.<\/p>\n\nimport { merge, fromEvent, interval } from 'rxjs';\n\nconst buttonClick$ = fromEvent(document.getElementById('myButton'), 'click');\nconst timer$ = interval(1000);\n\nconst merged$ = merge(buttonClick$, timer$);\n\nmerged$.subscribe(val => console.log(val));\n<\/code><\/pre>\ncombineLatest<\/code> Operat\u00f6r\u00fc: Son De\u011ferleri Birle\u015ftirme<\/h2>\ncombineLatest<\/code>, birden fazla ak\u0131\u015f\u0131n son de\u011ferlerini<\/strong> bir araya getirir. Sadece her ak\u0131\u015ftan en az bir de\u011fer geldikten sonra \u00e7al\u0131\u015f\u0131r ve bundan sonra, herhangi bir ak\u0131\u015fta de\u011fer de\u011fi\u015fti\u011finde, t\u00fcm ak\u0131\u015flar\u0131n son de\u011ferleri yeni bir dizi olarak yay\u0131l\u0131r. Bu, ba\u011f\u0131ml\u0131 veri kaynaklar\u0131n\u0131 senkronize etmek i\u00e7in \u00e7ok faydal\u0131d\u0131r.<\/p>\n\nimport { combineLatest, fromEvent } from 'rxjs';\n\nconst input1$ = fromEvent(document.getElementById('input1'), 'input');\nconst input2$ = fromEvent(document.getElementById('input2'), 'input');\n\ncombineLatest([input1$, input2$]).subscribe(([val1, val2]) => {\n console.log('Input 1:', val1.target.value);\n console.log('Input 2:', val2.target.value);\n});\n<\/code><\/pre>\nforkJoin<\/code> Operat\u00f6r\u00fc: T\u00fcm Ak\u0131\u015flar Tamamland\u0131\u011f\u0131nda<\/h2>\nforkJoin<\/code> operat\u00f6r\u00fc ise, yaln\u0131zca t\u00fcm<\/strong> girdi ak\u0131\u015flar\u0131 tamamland\u0131\u011f\u0131nda sonu\u00e7lar\u0131 birle\u015ftirir. E\u011fer bir ak\u0131\u015f hata \u00fcretmi\u015fse veya tamamlanmam\u0131\u015fsa, forkJoin<\/code> hata f\u0131rlat\u0131r. Bu nedenle, ba\u011f\u0131ms\u0131z ama sonucun birle\u015ftirilmesini gerektiren i\u015flemler i\u00e7in idealdir. \u00d6rne\u011fin, birka\u00e7 API \u00e7a\u011fr\u0131s\u0131n\u0131n sonucunu beklerken kullanabilirsiniz.<\/p>\n\nimport { forkJoin, of } from 'rxjs';\n\nconst obs1$ = of(1, 2, 3);\nconst obs2$ = of(4, 5, 6);\n\nforkJoin([obs1$, obs2$]).subscribe(results => console.log(results)); \/\/ [ [1,2,3], [4,5,6] ]\n<\/code><\/pre>\nzip<\/code> Operat\u00f6r\u00fc: Ak\u0131\u015flar\u0131 E\u015fle\u015ftirip Birle\u015ftirme<\/h2>\nzip<\/code> operat\u00f6r\u00fc, girdi ak\u0131\u015flar\u0131n\u0131n de\u011ferlerini s\u0131rayla e\u015fle\u015ftirir ve birle\u015ftirir. Her ak\u0131\u015ftan bir de\u011fer al\u0131r, bunlar\u0131 bir dizi halinde birle\u015ftirir ve yayar. Herhangi bir ak\u0131\u015f bitti\u011finde, zip<\/code> operat\u00f6r\u00fc de biter. Bu nedenle, e\u015fle\u015ftirilmi\u015f veri i\u015fleme i\u00e7in ideal bir operat\u00f6rd\u00fcr.<\/p>\n\nimport { zip, from } from 'rxjs';\n\nconst arr1 = [1, 2, 3];\nconst arr2 = ['a', 'b', 'c'];\n\nzip(from(arr1), from(arr2)).subscribe(result => console.log(result)); \/\/ [1,'a'], [2,'b'], [3,'c']\n<\/code><\/pre>\nSonu\u00e7<\/h2>\n
\n<\/html><\/p>\n","protected":false},"excerpt":{"rendered":"RxJS’te Ak\u0131\u015flar\u0131 Birle\u015ftirme: \u0130leri D\u00fczey Teknikler Merhaba! RxJS ser\u00fcvenimizin \u00fc\u00e7\u00fcnc\u00fc ad\u0131m\u0131nda, reactive programlaman\u0131n kalbindeki \u00f6nemli bir konuya, ak\u0131\u015flar\u0131n…","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_page_header_type":"","csco_page_load_nextpost":"","csco_page_subscribe_form":"","csco_page_contact_form":"","footnotes":""},"categories":[1],"tags":[],"class_list":{"0":"post-18611","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-genel","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"\n