Angular uygulamalar\u0131nda durum y\u00f6netimi, performans ve geli\u015ftirici deneyimi a\u00e7\u0131s\u0131ndan kritik bir \u00f6neme sahiptir. Geleneksel yakla\u015f\u0131mlar\u0131n getirdi\u011fi zorluklara kar\u015f\u0131, RxJS’in g\u00fc\u00e7l\u00fc reaktif programlama yeteneklerini Angular Signals ile birle\u015ftirmek, daha modern, optimize edilmi\u015f ve sezgisel bir \u00e7\u00f6z\u00fcm sunar. Bu makalede, bu iki teknolojiyi bir araya getirerek uygulaman\u0131z\u0131n reaktivitesini nas\u0131l zirveye ta\u015f\u0131yaca\u011f\u0131n\u0131z\u0131 ad\u0131m ad\u0131m ke\u015ffedece\u011fiz.<\/p>\n
Modern web uygulamalar\u0131, kullan\u0131c\u0131 etkile\u015fimleriyle dolu dinamik ve s\u00fcrekli de\u011fi\u015fen yap\u0131lard\u0131r. Bir kullan\u0131c\u0131n\u0131n e-ticaret sitesinde \u00fcr\u00fcn sepete eklemesinden, bir finans uygulamas\u0131nda ger\u00e7ek zamanl\u0131 verilerin g\u00fcncellenmesine kadar her senaryo, uygulaman\u0131n durumunu y\u00f6netme ihtiyac\u0131n\u0131 do\u011furur. Angular gibi \u00e7er\u00e7eveler, bu durumu y\u00f6netmek i\u00e7in \u00e7e\u015fitli ara\u00e7lar sunsa da, b\u00fcy\u00fck ve karma\u015f\u0131k uygulamalarda kar\u015f\u0131la\u015f\u0131lan ortak zorluklar vard\u0131r.<\/p>\n
\u00d6ncelikle, uygulaman\u0131n farkl\u0131 bile\u015fenleri aras\u0131nda veri payla\u015f\u0131m\u0131 ve senkronizasyonu genellikle karma\u015f\u0131k hale gelebilir. Bir bile\u015fenin durumu de\u011fi\u015fti\u011finde, bu de\u011fi\u015fimin ilgili di\u011fer t\u00fcm bile\u015fenlere etkili bir \u015fekilde yay\u0131lmas\u0131 gerekir. Geleneksel olarak, bu durum Subject’ler, EventEmitter’lar veya servisler arac\u0131l\u0131\u011f\u0131yla y\u00f6netilse de, zamanla kod taban\u0131 b\u00fcy\u00fcd\u00fck\u00e7e bu ak\u0131\u015flar\u0131 takip etmek ve hata ay\u0131klamak zorla\u015fabilir. \u0130kincisi, performans endi\u015feleri. \u00d6zellikle Angular’\u0131n Zone.js tabanl\u0131 de\u011fi\u015fim tespit mekanizmas\u0131, uygulaman\u0131n her yerindeki olas\u0131 de\u011fi\u015fiklikleri kontrol etmek i\u00e7in kaynak t\u00fcketebilir. Bu durum, \u00f6zellikle s\u0131k g\u00fcncellenen verilerin veya b\u00fcy\u00fck veri setlerinin oldu\u011fu senaryolarda gereksiz yeniden render i\u015flemlerine yol a\u00e7arak performans d\u00fc\u015f\u00fc\u015f\u00fcne neden olabilir. \u00dc\u00e7\u00fcnc\u00fcs\u00fc, geli\u015ftirici deneyimi. Karma\u015f\u0131k durum y\u00f6netimi ak\u0131\u015flar\u0131, kodun okunabilirli\u011fini azaltabilir ve yeni geli\u015ftiricilerin projeye adaptasyonunu zorla\u015ft\u0131rabilir.<\/p>\n
Bu ba\u011flamda, Angular ekibi, reaktif durum y\u00f6netimini daha verimli ve sezgisel hale getirmek i\u00e7in “Signals” kavram\u0131n\u0131 tan\u0131tt\u0131. Signals, uygulamadaki veri de\u011fi\u015fikliklerini daha granular (daha k\u00fc\u00e7\u00fck par\u00e7ac\u0131kl\u0131) bir \u015fekilde takip etme ve sadece ilgili bile\u015fenleri g\u00fcncelleme yetene\u011fi sunar. Bu, Zone.js’in y\u00fck\u00fcn\u00fc azaltarak veya tamamen ortadan kald\u0131rarak performans\u0131 \u00f6nemli \u00f6l\u00e7\u00fcde art\u0131rabilir. Ancak Signals, tek ba\u015f\u0131na t\u00fcm durum y\u00f6netimi ihtiya\u00e7lar\u0131n\u0131 kar\u015f\u0131lamaz. \u00d6zellikle asenkron veri ak\u0131\u015flar\u0131n\u0131, karma\u015f\u0131k transformasyonlar\u0131 ve hata y\u00f6netimini ele almak i\u00e7in RxJS’in g\u00fc\u00e7l\u00fc operat\u00f6r setine hala ihtiyac\u0131m\u0131z var.<\/p>\n
Bu makalede, RxJS’in asenkron veri ak\u0131\u015flar\u0131n\u0131 y\u00f6netme yetene\u011fi ile Angular Signals’\u0131n granular reaktivite ve performans avantajlar\u0131n\u0131 nas\u0131l birle\u015ftirebilece\u011fimizi derinlemesine inceleyece\u011fiz. Bu modern yakla\u015f\u0131m, hem kodunuzu daha temiz ve y\u00f6netilebilir hale getirecek hem de son kullan\u0131c\u0131ya daha ak\u0131c\u0131 bir deneyim sunacakt\u0131r. \u00d6n\u00fcm\u00fczdeki b\u00f6l\u00fcmlerde, bu iki g\u00fcc\u00fcn senkronize bir \u015fekilde nas\u0131l \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131, pratik \u00f6rneklerle ve ger\u00e7ek d\u00fcnya senaryolar\u0131yla ad\u0131m ad\u0131m \u00f6\u011freneceksiniz. Amac\u0131m\u0131z, Angular’da reaktif programlaman\u0131n gelece\u011fine y\u00f6nelik sa\u011flam bir temel olu\u015fturmak ve bu yenilik\u00e7i teknikleri kendi projelerinize nas\u0131l entegre edece\u011finizi g\u00f6stermektir.<\/p>\n
Angular ekosisteminde veri ak\u0131\u015f\u0131n\u0131 ve reaktif programlamay\u0131 anlamak, Signals ve RxJS birlikteli\u011fini kavraman\u0131n anahtar\u0131d\u0131r. Her ikisi de uygulamam\u0131z\u0131n dinamik do\u011fas\u0131n\u0131 y\u00f6netmemize yard\u0131mc\u0131 olsa da, farkl\u0131 sorumluluklara ve kullan\u0131m alanlar\u0131na sahiptirler. Bu b\u00f6l\u00fcmde, her birinin temel prensiplerini ve birbirlerini nas\u0131l tamamlad\u0131klar\u0131n\u0131 detayland\u0131raca\u011f\u0131z.<\/p>\n
RxJS (Reactive Extensions for JavaScript), asenkron ve olay tabanl\u0131 programlama i\u00e7in bir k\u00fct\u00fcphanedir. Temelinde “Observable” kavram\u0131 yer al\u0131r. Bir Observable, zamanla birden fazla de\u011fer yayabilen bir koleksiyon gibidir. Bu de\u011ferler senkron veya asenkron olabilir. Bir Observable’a “subscribe” (abone) olan bir “Observer”, Observable’dan gelen de\u011ferleri al\u0131r ve \u00fczerinde i\u015flemler yapabilir.<\/p>\n
RxJS’i bu kadar g\u00fc\u00e7l\u00fc yapan \u015fey, zengin operat\u00f6r setidir. Bu operat\u00f6rler sayesinde, Observable’dan gelen verileri filtreleyebilir, d\u00f6n\u00fc\u015ft\u00fcrebilir, birle\u015ftirebilir veya yan etkileri y\u00f6netebilirsiniz. \u00d6rne\u011fin, bir API \u00e7a\u011fr\u0131s\u0131ndan d\u00f6nen veriyi i\u015flemek, birden fazla kaynaktan gelen veriyi birle\u015ftirmek veya kullan\u0131c\u0131 aray\u00fcz\u00fc olaylar\u0131n\u0131 debouncing ile geciktirmek gibi senaryolarda RxJS vazge\u00e7ilmezdir. \u0130\u015fte s\u0131k\u00e7a kullan\u0131lan baz\u0131 RxJS kavramlar\u0131:<\/p>\n
map<\/code>, filter<\/code>, switchMap<\/code>, debounceTime<\/code> gibi veri ak\u0131\u015flar\u0131n\u0131 d\u00f6n\u00fc\u015ft\u00fcren veya kontrol eden fonksiyonlar.<\/li>\n- Subject:<\/strong> Hem Observable hem de Observer gibi davranabilen \u00f6zel bir Observable t\u00fcr\u00fc.
BehaviorSubject<\/code> ve ReplaySubject<\/code> gibi t\u00fcrevleri mevcuttur.<\/li>\n<\/ul>\n\nimport { fromEvent, map, debounceTime } from 'rxjs';\n\nconst searchInput = document.getElementById('search-input');\nif (searchInput) {\n fromEvent(searchInput, 'input')\n .pipe(\n map((event: Event) => (event.target as HTMLInputElement).value),\n debounceTime(300) \/\/ 300ms gecikme ile arama yapar\n )\n .subscribe(searchTerm => {\n console.log('Arama terimi:', searchTerm);\n \/\/ API \u00e7a\u011fr\u0131s\u0131 yapabilirsiniz\n });\n}\n <\/pre>\n<\/code><\/p>\n
Yukar\u0131daki \u00f6rnekte, kullan\u0131c\u0131 bir arama kutusuna yazd\u0131\u011f\u0131nda, RxJS fromEvent<\/code> operat\u00f6r\u00fc ile input olaylar\u0131n\u0131 bir Observable'a d\u00f6n\u00fc\u015ft\u00fcr\u00fcl\u00fcyor. Daha sonra map<\/code> ile input de\u011ferini al\u0131yor ve debounceTime<\/code> ile h\u0131zl\u0131 yazmalarda gereksiz \u00e7a\u011fr\u0131lar\u0131 engelliyoruz. Bu, RxJS'in asenkron olaylar\u0131 ne kadar zarif bir \u015fekilde y\u00f6netti\u011finin g\u00fczel bir g\u00f6stergesidir.<\/p>\nAngular Signals: Reaktif Durum De\u011fi\u015fimlerini Gran\u00fcler Olarak Nas\u0131l Y\u00f6netir?<\/h3>\n
Angular Signals, Angular 16 ile tan\u0131t\u0131lan ve uygulaman\u0131n reaktivitesini temelden de\u011fi\u015ftiren yeni bir primitiftir. Signals, bir de\u011feri saran ve bu de\u011fer de\u011fi\u015fti\u011finde ilgili t\u00fcm ba\u011f\u0131ml\u0131l\u0131klar\u0131 otomatik olarak bildiren basit bir de\u011fi\u015fkendir. En b\u00fcy\u00fck avantaj\u0131, uygulaman\u0131n de\u011fi\u015fim tespit mekanizmas\u0131ndan ba\u011f\u0131ms\u0131z olarak \u00e7al\u0131\u015fabilmesi ve yaln\u0131zca de\u011fi\u015fen Signal'e ba\u011fl\u0131 bile\u015fenlerin veya hesaplamalar\u0131n g\u00fcncellenmesini sa\u011flamas\u0131d\u0131r. Bu \"granular reaktivite\", Zone.js'in y\u00fck\u00fcn\u00fc azaltarak veya tamamen ortadan kald\u0131rarak performans\u0131 \u00f6nemli \u00f6l\u00e7\u00fcde art\u0131r\u0131r.<\/p>\n
Temel Signal t\u00fcrleri \u015funlard\u0131r:<\/p>\n
\nsignal()<\/code>:<\/strong> De\u011fi\u015fken bir de\u011feri tutan temel Signal. set()<\/code> veya update()<\/code> metotlar\u0131 ile de\u011feri de\u011fi\u015ftirilir.<\/li>\ncomputed()<\/code>:<\/strong> Bir veya daha fazla Signal'den t\u00fcretilen salt okunur bir Signal. Ba\u011f\u0131ml\u0131 oldu\u011fu Signal'lerden biri de\u011fi\u015fti\u011finde otomatik olarak yeniden hesaplan\u0131r.<\/li>\neffect()<\/code>:<\/strong> Bir Signal'in de\u011feri de\u011fi\u015fti\u011finde yan etkileri (konsola yazd\u0131rma, DOM'a eri\u015fme, senkronizasyon vb.) \u00e7al\u0131\u015ft\u0131rmak i\u00e7in kullan\u0131l\u0131r.<\/li>\n<\/ul>\n\nimport { signal, computed, effect } from '@angular\/core';\n\nconst count = signal(0);\nconst doubleCount = computed(() => count() * 2);\n\neffect(() => {\n console.log('Mevcut say\u0131:', count());\n console.log('\u0130ki kat\u0131:', doubleCount());\n});\n\ncount.set(1); \/\/ Effect \u00e7al\u0131\u015f\u0131r\ncount.update(value => value + 1); \/\/ Effect tekrar \u00e7al\u0131\u015f\u0131r\n\/\/ doubleCount.set(5); \/\/ Hata: Computed signal'lar salt okunurdur.\n <\/pre>\n<\/code><\/p>\n
Yukar\u0131daki \u00f6rnekte, count<\/code> bir Signal olarak tan\u0131mlan\u0131r. doubleCount<\/code>, count<\/code> Signal'inden t\u00fcretilmi\u015f bir computed<\/code> Signal'dir. effect<\/code> ise, count<\/code> veya doubleCount<\/code> de\u011fi\u015fti\u011finde \u00e7al\u0131\u015facak bir yan etkiyi tan\u0131mlar. G\u00f6rd\u00fc\u011f\u00fcn\u00fcz gibi, Signals ile reaktif veri ak\u0131\u015f\u0131n\u0131 y\u00f6netmek olduk\u00e7a sezgisel ve do\u011frudan bir hale gelmi\u015ftir.<\/p>\n\n Uzman \u0130pucu: RxJS ve Signals aras\u0131ndaki temel fark, RxJS'in \"pull\" (istek \u00fczerine) tabanl\u0131 asenkron ak\u0131\u015flar\u0131 y\u00f6netirken, Signals'\u0131n \"push\" (de\u011fi\u015fimle birlikte otomatik) tabanl\u0131 senkron reaktivite sa\u011flamas\u0131d\u0131r. Bu ikili, birbirini m\u00fckemmel bir \u015fekilde tamamlar.\n <\/div>\n\u00d6zetle, RxJS, uygulaman\u0131zdaki asenkron olaylar\u0131 ve veri ak\u0131\u015flar\u0131n\u0131 d\u00fczenlemek i\u00e7in g\u00fc\u00e7l\u00fc bir ara\u00e7 seti sunarken, Angular Signals, bu ak\u0131\u015flardan gelen verileri al\u0131p, UI bile\u015fenlerinizin ve di\u011fer hesaplamalar\u0131n\u0131z\u0131n yaln\u0131zca gerekti\u011finde g\u00fcncellenmesini sa\u011flayan, performans odakl\u0131 bir reaktivite primitifidir. Bu ikisinin birle\u015fimi, Angular'da durum y\u00f6netimini hem daha g\u00fc\u00e7l\u00fc hem de daha y\u00f6netilebilir hale getiriyor. Bir sonraki b\u00f6l\u00fcmde, bu kavramlar\u0131 ger\u00e7ek bir senaryo \u00fczerinde nas\u0131l uygulayabilece\u011fimizi g\u00f6rece\u011fiz.<\/p>\n
Pratik Uygulama: RxJS Veri Ak\u0131\u015flar\u0131n\u0131 Signals ile Entegre Etmek Nas\u0131l Yap\u0131l\u0131r?<\/h2>\n
\u015eimdiye kadar RxJS ve Signals'\u0131n temel prensiplerini anlad\u0131k. Art\u0131k bu iki g\u00fc\u00e7l\u00fc arac\u0131 ger\u00e7ek bir senaryoda nas\u0131l birle\u015ftirebilece\u011fimizi g\u00f6relim. Genellikle bir uygulamada, bir API'den veri \u00e7ekeriz (RxJS ile) ve bu veriyi kullan\u0131c\u0131 aray\u00fcz\u00fcnde g\u00f6steririz (Signals ile reaktif olarak). Bu b\u00f6l\u00fcm, ad\u0131m ad\u0131m bir \u00fcr\u00fcn listeleme uygulamas\u0131nda bu entegrasyonu nas\u0131l yapaca\u011f\u0131m\u0131z\u0131 a\u00e7\u0131klayacakt\u0131r.<\/p>\n
Senaryo: Dinamik Bir \u00dcr\u00fcn Listesi Uygulamas\u0131 Geli\u015ftirmek<\/h3>\n
Bir e-ticaret uygulamas\u0131n\u0131n \u00fcr\u00fcn listeleme sayfas\u0131n\u0131 d\u00fc\u015f\u00fcnelim. Kullan\u0131c\u0131lar \u00fcr\u00fcnleri kategoriye g\u00f6re filtreleyebilir ve listedeki \u00fcr\u00fcn say\u0131s\u0131, filtrelere g\u00f6re dinamik olarak de\u011fi\u015fir. Ayr\u0131ca, \u00fcr\u00fcnler asenkron olarak bir API'den y\u00fcklenmelidir. Bu senaryo, hem RxJS'in asenkron yeteneklerini hem de Signals'\u0131n gran\u00fcler UI reaktivitesini kullanmak i\u00e7in m\u00fckemmel bir f\u0131rsat sunar.<\/p>\n
Ad\u0131m 1: RxJS ile \u00dcr\u00fcn Verilerini Asenkron Olarak \u00c7ekme<\/h4>\n
\u0130lk olarak, \u00fcr\u00fcn verilerini \u00e7ekecek bir servis olu\u015ftural\u0131m. Bu servis, bir HTTP iste\u011fi yaparak Observable bir \u00fcr\u00fcn dizisi d\u00f6nd\u00fcrecektir. Hata y\u00f6netimi i\u00e7in de catchError<\/code> operat\u00f6r\u00fcn\u00fc kullanaca\u011f\u0131z.<\/p>\n\n\/\/ src\/app\/services\/product.service.ts\nimport { Injectable } from '@angular\/core';\nimport { HttpClient } from '@angular\/common\/http';\nimport { Observable, of } from 'rxjs';\nimport { catchError, tap } from 'rxjs\/operators';\n\nexport interface Product {\n id: number;\n name: string;\n category: string;\n price: number;\n}\n\n@Injectable({\n providedIn: 'root'\n})\nexport class ProductService {\n private productsUrl = 'api\/products'; \/\/ \u00d6rnek bir API endpoint'i\n\n constructor(private http: HttpClient) {}\n\n getProducts(): Observable {\n return this.http.get(this.productsUrl)\n .pipe(\n tap(products => console.log('\u00dcr\u00fcnler y\u00fcklendi:', products.length)),\n catchError(this.handleError('getProducts', []))\n );\n }\n\n private handleError(operation = 'operation', result?: T) {\n return (error: any): Observable => {\n console.error(${operation} ba\u015far\u0131s\u0131z oldu:<\/code>, error);\n \/\/ Uygulaman\u0131n \u00e7al\u0131\u015fmaya devam etmesi i\u00e7in bo\u015f bir sonu\u00e7 d\u00f6nd\u00fcrelim\n return of(result as T);\n };\n }\n}\n <\/pre>\n<\/code><\/p>\n
Bu servis, HttpClient<\/code> kullanarak \u00fcr\u00fcn verilerini \u00e7eker ve olas\u0131 hatalar\u0131 yakalar. \u015eimdi bu servisi bir bile\u015fende kullanal\u0131m ve \u00e7ekilen verileri bir Signal'e aktaral\u0131m.<\/p>\nAd\u0131m 2: \u00c7ekilen Veriyi Bir Signal'e Atama ve Durum Y\u00f6netimi<\/h4>\n
\u015eimdi ProductService<\/code>'i kullanan bir bile\u015fen olu\u015ftural\u0131m. Bu bile\u015fen, \u00fcr\u00fcnleri y\u00fckleyecek ve y\u00fcklenen \u00fcr\u00fcnleri bir Signal i\u00e7inde saklayacakt\u0131r. Ayr\u0131ca, y\u00fcklenme durumu ve hata durumu gibi bilgileri de Signal'ler arac\u0131l\u0131\u011f\u0131yla y\u00f6netece\u011fiz.<\/p>\n\n\/\/ src\/app\/product-list\/product-list.component.ts\nimport { Component, OnInit, inject, signal } from '@angular\/core';\nimport { Product, ProductService } from '..\/services\/product.service';\nimport { toSignal } from '@angular\/core\/rxjs-interop'; \/\/ RxJS'i Signal'e \u00e7evirmek i\u00e7in\n\n@Component({\n selector: 'app-product-list',\n standalone: true,\n template: \u00dcr\u00fcn Listesi<\/h2>\n \u00dcr\u00fcnler y\u00fckleniyor...<\/div>\n Hata olu\u015ftu: {{ error() }}<\/div>\n \n - \n {{ product.name }} - {{ product.price | currency:'USD':'symbol':'1.2-2' }}\n <\/li>\n <\/ul><\/code>,\n styleUrls: ['.\/product-list.component.css']\n})\nexport class ProductListComponent implements OnInit {\n private productService = inject(ProductService);\n\n \/\/ \u00dcr\u00fcn listesi i\u00e7in bir Signal\n products = signal
([]);\n \/\/ Y\u00fcklenme durumu i\u00e7in bir Signal\n loading = signal(true);\n \/\/ Hata durumu i\u00e7in bir Signal\n error = signal(null);\n\n ngOnInit() {\n this.productService.getProducts().subscribe({\n next: (data) => {\n this.products.set(data); \/\/ \u00c7ekilen \u00fcr\u00fcnleri Signal'e set et\n this.loading.set(false);\n },\n error: (err) => {\n this.error.set('\u00dcr\u00fcnler y\u00fcklenirken bir sorun olu\u015ftu.');\n this.loading.set(false);\n console.error('Y\u00fckleme hatas\u0131:', err);\n }\n });\n }\n}\n <\/pre>\n<\/code><\/p>\n
Burada products<\/code>, loading<\/code> ve error<\/code> gibi durumlar\u0131 birer Signal olarak tan\u0131mlad\u0131k. productService.getProducts()<\/code>'dan gelen Observable'a abone oluyor ve gelen veriyi products<\/code> Signal'ine at\u0131yoruz. Bu sayede, \u00fcr\u00fcnler y\u00fcklendi\u011finde veya bir hata olu\u015ftu\u011funda, sadece ilgili Signal'e ba\u011f\u0131ml\u0131 k\u0131s\u0131mlar g\u00fcncellenecektir.<\/p>\n\n Uzman \u0130pucu: Angular 16+ ile gelen @angular\/core\/rxjs-interop<\/code> paketindeki toSignal()<\/code> fonksiyonu, bir Observable'\u0131 do\u011frudan bir Signal'e d\u00f6n\u00fc\u015ft\u00fcrmenin daha deklaratif ve y\u00f6netilebilir bir yolunu sunar. Bu, \u00f6zellikle servislerden gelen verileri do\u011frudan bile\u015fenlerdeki Signal'lere ba\u011flamak i\u00e7in \u00e7ok kullan\u0131\u015fl\u0131d\u0131r.\n <\/div>\n\n\/\/ toSignal kullan\u0131m\u0131 ile daha temiz bir yakla\u015f\u0131m\nimport { Component, inject, signal } from '@angular\/core';\nimport { Product, ProductService } from '..\/services\/product.service';\nimport { toSignal } from '@angular\/core\/rxjs-interop';\n\n@Component({\n selector: 'app-product-list-simplified',\n standalone: true,\n template: Basitle\u015ftirilmi\u015f \u00dcr\u00fcn Listesi<\/h2>\n \u00dcr\u00fcnler y\u00fckleniyor...<\/div>\n Hata olu\u015ftu: {{ products.error?.message }}<\/div>\n \n - \n {{ product.name }} - {{ product.price | currency:'USD':'symbol':'1.2-2' }}\n <\/li>\n <\/ul><\/code>,\n styleUrls: ['.\/product-list.component.css']\n})\nexport class ProductListSimplifiedComponent {\n private productService = inject(ProductService);\n\n \/\/ toSignal ile Observable do\u011frudan bir Signal'e d\u00f6n\u00fc\u015ft\u00fcr\u00fcl\u00fcyor\n \/\/ toSignal, loading ve error durumlar\u0131n\u0131 da otomatik y\u00f6netir.\n products = toSignal(this.productService.getProducts(), { initialValue: [] });\n}\n <\/pre>\n
<\/code><\/p>\n
toSignal<\/code> kullan\u0131m\u0131, hem y\u00fcklenme hem de hata durumlar\u0131n\u0131 otomatik olarak y\u00f6neten bir Signal<\/code> d\u00f6nd\u00fcr\u00fcr ve daha az boilerplate kodu yazman\u0131z\u0131 sa\u011flar.<\/p>\nAd\u0131m 3: computed()<\/code> ile Filtreleme ve Dinamik Hesaplamalar<\/h4>\n\u015eimdi \u00fcr\u00fcn listemize filtreleme \u00f6zelli\u011fi ekleyelim. Bir filtre terimi i\u00e7in bir Signal tan\u0131mlayacak ve bu Signal ile \u00fcr\u00fcnler Signal'ini kullanarak filtrelenmi\u015f \u00fcr\u00fcnleri hesaplayacak bir computed<\/code> Signal olu\u015fturaca\u011f\u0131z.<\/p>\n\n\/\/ src\/app\/product-list\/product-list.component.ts (Devam\u0131)\nimport { Component, OnInit, inject, signal, computed } from '@angular\/core';\nimport { Product, ProductService } from '..\/services\/product.service';\nimport { toSignal } from '@angular\/core\/rxjs-interop';\nimport { CommonModule, CurrencyPipe } from '@angular\/common'; \/\/ NgFor ve CurrencyPipe i\u00e7in\n\n@Component({\n selector: 'app-product-list',\n standalone: true,\n imports: [CommonModule, CurrencyPipe], \/\/ Mod\u00fclleri buraya ekleyin\n template: \u00dcr\u00fcn Listesi<\/h2>\n \n \u00dcr\u00fcnler y\u00fckleniyor...<\/div>\n Hata olu\u015ftu: {{ productsSignal().error?.message }}<\/div>\n G\u00f6sterilen \u00dcr\u00fcn Say\u0131s\u0131: {{ filteredProducts().length }}<\/p>\n
\n - \n {{ product.name }} ({{ product.category }}) - {{ product.price | currency:'USD':'symbol':'1.2-2' }}\n <\/li>\n <\/ul><\/code>,\n styleUrls: ['.\/product-list.component.css']\n})\nexport class ProductListComponent {\n private productService = inject(ProductService);\n\n \/\/ toSignal ile y\u00fcklenen \u00fcr\u00fcnler\n productsSignal = toSignal(this.productService.getProducts(), { initialValue: [] });\n\n \/\/ Arama terimi i\u00e7in bir Signal\n searchTerm = signal('');\n\n \/\/ Filtrelenmi\u015f \u00fcr\u00fcnler i\u00e7in bir computed Signal\n filteredProducts = computed(() => {\n const products = this.productsSignal().value || [];\n const term = this.searchTerm().toLowerCase();\n\n if (!term) {\n return products;\n }\n\n return products.filter(product =>\n product.name.toLowerCase().includes(term) ||\n product.category.toLowerCase().includes(term)\n );\n });\n}\n <\/pre>\n
<\/code><\/p>\n
searchTerm<\/code> bir Signal oldu\u011fu i\u00e7in, de\u011feri de\u011fi\u015fti\u011finde filteredProducts<\/code> computed<\/code> Signal'i otomatik olarak yeniden hesaplanacak ve UI'da filtrelenmi\u015f liste g\u00fcncellenecektir. Bu, Angular'\u0131n de\u011fi\u015fim tespit mekanizmas\u0131ndan ba\u011f\u0131ms\u0131z ve sadece ilgili k\u0131s\u0131mlar\u0131 g\u00fcncelleyerek y\u00fcksek performans sa\u011flar.<\/p>\nAd\u0131m 4: Kullan\u0131c\u0131 Etkile\u015fimlerini effect()<\/code> ile Y\u00f6netme (\u0130ste\u011fe Ba\u011fl\u0131 Yan Etkiler)<\/h4>\neffect<\/code>, bir Signal de\u011fi\u015fti\u011finde bir yan etkiyi \u00e7al\u0131\u015ft\u0131rmak i\u00e7in kullan\u0131l\u0131r. Genellikle DOM manip\u00fclasyonlar\u0131, loglama veya \u00fc\u00e7\u00fcnc\u00fc taraf k\u00fct\u00fcphanelerle entegrasyon gibi durumlar i\u00e7in tercih edilir. \u00d6rne\u011fin, arama terimi her de\u011fi\u015fti\u011finde konsola bir mesaj yazd\u0131rmak isteyebilirsiniz:<\/p>\n\n\/\/ src\/app\/product-list\/product-list.component.ts (Devam\u0131)\nimport { effect } from '@angular\/core';\n\/\/ ... di\u011fer import'lar\n\n@Component({\n \/\/ ...\n})\nexport class ProductListComponent {\n \/\/ ... di\u011fer Signal'ler ve metotlar\n\n constructor() {\n \/\/ Arama terimi her de\u011fi\u015fti\u011finde \u00e7al\u0131\u015facak bir effect\n effect(() => {\n console.log('Yeni arama terimi:', this.searchTerm());\n \/\/ Belki bir analiz servisine log g\u00f6nderebiliriz\n });\n }\n}\n <\/pre>\n<\/code><\/p>\n
Bu effect<\/code>, searchTerm<\/code> Signal'i her de\u011fi\u015fti\u011finde \u00e7al\u0131\u015facak ve ilgili yan etkiyi ger\u00e7ekle\u015ftirecektir. Ancak unutmay\u0131n, effect<\/code>'ler genellikle UI g\u00fcncellemeleri veya do\u011frudan Signal de\u011ferlerini de\u011fi\u015ftirmek i\u00e7in kullan\u0131lmamal\u0131d\u0131r; bunun yerine computed<\/code> Signal'ler veya bile\u015fen \u015fablonlar\u0131 tercih edilmelidir. Bu pratik uygulama, RxJS ve Signals'\u0131n birlikte nas\u0131l modern ve reaktif bir Angular uygulamas\u0131 olu\u015fturmak i\u00e7in kullan\u0131labilece\u011fini a\u00e7\u0131k\u00e7a g\u00f6stermektedir.<\/p>\nVaka Analizi: B\u00fcy\u00fck \u00d6l\u00e7ekli Bir Uygulamada Performans Optimizasyonu Nas\u0131l Sa\u011flan\u0131r?<\/h2>\n
B\u00fcy\u00fck ve karma\u015f\u0131k Angular uygulamalar\u0131nda performans, her zaman \u00f6ncelikli bir konudur. Geleneksel Zone.js tabanl\u0131 de\u011fi\u015fim tespit mekanizmas\u0131, uygulaman\u0131n her yerindeki olas\u0131 de\u011fi\u015fiklikleri kontrol etmek i\u00e7in kaynak t\u00fcketebilir, bu da \u00f6zellikle s\u0131k g\u00fcncellenen verilerle \u00e7al\u0131\u015fan bile\u015fenlerde performans sorunlar\u0131na yol a\u00e7abilir. RxJS ve Signals'\u0131n birle\u015fimi, bu t\u00fcr senaryolarda \u00f6nemli bir performans art\u0131\u015f\u0131 sa\u011flayabilir. Bu b\u00f6l\u00fcmde, bir e-ticaret sepet uygulamas\u0131 \u00fczerinden bu optimizasyonu inceleyece\u011fiz.<\/p>\n
Senaryo: Dinamik Sepet Durumu Y\u00f6netimi<\/h3>\n
Bir e-ticaret uygulamas\u0131nda, kullan\u0131c\u0131lar\u0131n sepetine \u00fcr\u00fcn ekleyip \u00e7\u0131karmas\u0131, miktarlar\u0131 de\u011fi\u015ftirmesi gibi etkile\u015fimler s\u00fcrekli olarak ger\u00e7ekle\u015fir. Sepet durumu (\u00fcr\u00fcn say\u0131s\u0131, toplam fiyat, indirimler vb.) s\u0131k s\u0131k g\u00fcncellenir ve bu g\u00fcncellemelerin uygulaman\u0131n farkl\u0131 yerlerindeki bile\u015fenlere (\u00f6rne\u011fin, navigasyon \u00e7ubu\u011fundaki sepet simgesi, sepet sayfas\u0131, \u00f6deme \u00f6zeti) yans\u0131mas\u0131 gerekir. Geleneksel olarak bu durum, bir BehaviorSubject<\/code> veya bir servis arac\u0131l\u0131\u011f\u0131yla y\u00f6netilirdi ve her de\u011fi\u015fiklik, Zone.js taraf\u0131ndan t\u00fcm uygulaman\u0131n de\u011fi\u015fim tespit d\u00f6ng\u00fcs\u00fcn\u00fc tetikleyebilirdi.<\/p>\nGeleneksel Yakla\u015f\u0131mdaki Performans Sorunlar\u0131<\/h4>\n
E\u011fer sepet verisi bir Observable<\/code> olarak tutulup bile\u015fenlerde async<\/code> pipe ile kullan\u0131l\u0131yorsa, bu bile\u015fenlerin OnPush<\/code> de\u011fi\u015fim tespit stratejisiyle bile, her sepet g\u00fcncellemesinde (observable yeni bir de\u011fer yayd\u0131\u011f\u0131nda) ilgili bile\u015fenin ve alt bile\u015fenlerinin de\u011fi\u015fim tespiti \u00e7al\u0131\u015fabilirdi. \u00d6zellikle b\u00fcy\u00fck bir bile\u015fen a\u011fac\u0131nda veya \u00e7ok say\u0131da e\u015fzamanl\u0131 veri ak\u0131\u015f\u0131nda, bu durum gereksiz hesaplamalara ve yava\u015flamaya yol a\u00e7abilirdi.<\/p>\nRxJS ve Signals ile Sepet Durumu Optimizasyonu<\/h4>\n
\u015eimdi, RxJS ve Signals'\u0131 birle\u015ftirerek bu senaryoyu nas\u0131l optimize edebilece\u011fimizi g\u00f6relim. Sepet durumunu y\u00f6netmek i\u00e7in yine RxJS BehaviorSubject<\/code> kullanaca\u011f\u0131z, ancak bu Subject<\/code>'ten gelen veriyi do\u011frudan Signals'a ba\u011flayarak UI reaktivitesini granular hale getirece\u011fiz.<\/p>\nAd\u0131m 1: Sepet Verisini RxJS ile Y\u00f6netme<\/h5>\n
\u00d6ncelikle, sepet verisini tutacak ve bu verilere eri\u015fim sa\u011flayacak bir CartService<\/code> olu\u015ftural\u0131m. Bu servis, BehaviorSubject<\/code> kullanarak sepet durumunu yayacak ve di\u011fer bile\u015fenlerin abone olmas\u0131n\u0131 sa\u011flayacakt\u0131r.<\/p>\n\n\/\/ src\/app\/services\/cart.service.ts\nimport { Injectable } from '@angular\/core';\nimport { BehaviorSubject, Observable } from 'rxjs';\nimport { map } from 'rxjs\/operators';\n\nexport interface CartItem {\n productId: number;\n name: string;\n price: number;\n quantity: number;\n}\n\n@Injectable({\n providedIn: 'root'\n})\nexport class CartService {\n private _cartItems = new BehaviorSubject([]);\n readonly cartItems$: Observable = this._cartItems.asObservable();\n\n constructor() {\n \/\/ Uygulama y\u00fcklendi\u011finde sepeti localStorage'dan y\u00fckle\n const storedCart = localStorage.getItem('cart');\n if (storedCart) {\n this._cartItems.next(JSON.parse(storedCart));\n }\n \/\/ Her sepet de\u011fi\u015fti\u011finde localStorage'a kaydet\n this.cartItems$.subscribe(items => {\n localStorage.setItem('cart', JSON.stringify(items));\n });\n }\n\n addToCart(product: { id: number; name: string; price: number }): void {\n const currentItems = this._cartItems.getValue();\n const existingItem = currentItems.find(item => item.productId === product.id);\n\n if (existingItem) {\n existingItem.quantity++;\n } else {\n currentItems.push({ ...product, quantity: 1 });\n }\n this._cartItems.next(currentItems);\n }\n\n removeFromCart(productId: number): void {\n const currentItems = this._cartItems.getValue().filter(item => item.productId !== productId);\n this._cartItems.next(currentItems);\n }\n\n getTotalItems(): Observable {\n return this.cartItems$.pipe(\n map(items => items.reduce((acc, item) => acc + item.quantity, 0))\n );\n }\n\n getTotalPrice(): Observable {\n return this.cartItems$.pipe(\n map(items => items.reduce((acc, item) => acc + (item.quantity * item.price), 0))\n );\n }\n}\n <\/pre>\n<\/code><\/p>\n
Bu servis, sepet durumunu _cartItems<\/code> BehaviorSubject<\/code>'inde tutar. addToCart<\/code> ve removeFromCart<\/code> gibi metotlarla sepeti g\u00fcnceller ve cartItems$<\/code> Observable'\u0131 arac\u0131l\u0131\u011f\u0131yla sepet durumunu d\u0131\u015f d\u00fcnyaya a\u00e7ar. Ayr\u0131ca sepetin toplam \u00fcr\u00fcn say\u0131s\u0131 ve toplam fiyat\u0131 gibi t\u00fcretilmi\u015f veriler i\u00e7in de Observable'lar sunar.<\/p>\nAd\u0131m 2: Signals ile Sepetin UI Taraf\u0131nda Reaktif G\u00f6sterimi<\/h5>\n
\u015eimdi bir CartSummaryComponent<\/code> olu\u015ftural\u0131m. Bu bile\u015fen, sepetin toplam \u00fcr\u00fcn say\u0131s\u0131n\u0131 ve toplam fiyat\u0131n\u0131 g\u00f6sterecektir. RxJS Observable'lar\u0131n\u0131 do\u011frudan Signals'a d\u00f6n\u00fc\u015ft\u00fcrmek i\u00e7in toSignal<\/code> fonksiyonunu kullanaca\u011f\u0131z.<\/p>\n\n\/\/ src\/app\/cart-summary\/cart-summary.component.ts\nimport { Component, inject } from '@angular\/core';\nimport { CartService } from '..\/services\/cart.service';\nimport { toSignal } from '@angular\/core\/rxjs-interop';\nimport { CommonModule, CurrencyPipe } from '@angular\/common'; \/\/ Gerekli mod\u00fcller\n\n@Component({\n selector: 'app-cart-summary',\n standalone: true,\n imports: [CommonModule, CurrencyPipe],\n template: \n Sepet \u00d6zeti<\/h3>\n
Toplam \u00dcr\u00fcn Say\u0131s\u0131: {{ totalItems() }}<\/strong><\/p>\n Toplam Fiyat: {{ totalPrice() | currency:'USD':'symbol':'1.2-2' }}<\/strong><\/p>\n