Blog
Mert Özen'in yazılım geliştirme, backend, frontend ve DevOps üzerine blog yazıları.
Doğru State Aracını Seçmek ve Angular State'in Evrimi: BehaviorSubject'ten Signal Store'a
Doğru state aracı state'in türünden çıkar: türetilen değer computed, server state resource, paylaşılabilir state URL, client state ise kapsamına göre signal, signal service, Signal Store, Events plugin ya da klasik Store. Bookstore'un dokuz feature'ı için yaptığımız seçimleri, snapshot'lardan ölçülen bundle maliyetini, store'lar arası bağımlılık kurallarını, NgRx Toolkit withDevtools'u ve BehaviorSubject'ten Signal Store'a uzanan, sürümleri doğrulanmış evrimi topluyoruz.
Angular'da State'i Test Etmek: Signal Service'leri, Signal Store ve NgRx Store Testleri
State kodu public API'si üzerinden test edilir: Signal Store bir service gibi TestBed ile alınır, effect'ler TestBed.tick() ile çalıştırılır, HTTP HttpTestingController ile, zaman Vitest fake timer'larıyla kontrol edilir; klasik Store'un reducer, selector ve functional effect'leri ise saf fonksiyon olarak test edilir. Bookstore'un sepet, arama, checkout ve back office state'i için 19 Vitest testi yazıyor; TestBed.tick() unutulunca effect'in hiç çalışmadığını gerçek çıktıyla gösteriyoruz.
Klasik NgRx Store: createActionGroup, createFeature, Selector'lar, Functional Effect'ler ve DevTools
Klasik NgRx Store, state'i tek bir global ağaçta tutar ve yalnız action'larla değiştirir: createActionGroup action'ları, createFeature reducer'ı ve otomatik selector'ları, createSelector memoized türetilmiş veriyi, functional effect'ler side effect'leri tanımlar. Bookstore'un back office siparişlerini yazıyor; NgRx 22'nin DevTools actionCreators seçeneğini, ESLint kurallarının yakaladığı hataları ve memoize edilmeyen bir selector'ın fazladan değer ürettiğini gerçek çıktıyla gösteriyoruz.
NgRx Signal Store Events Plugin: event, eventGroup, withReducer ve withEventHandlers ile Event-Driven State
Events plugin'i, birden çok store'un aynı olaya tepki verdiği akışlarda "ne oldu" ile "state nasıl değişir"i ayırır: component event dispatch eder, her store withReducer ile kendi state'ini değiştirir, withEventHandlers side effect'leri yürütür. Bookstore checkout'unda tek bir orderPlaced event'i sepeti boşaltıyor, siparişi kaydediyor ve bildirim gösteriyor; aynı akışın method versiyonuyla karşılaştırıyor ve henüz oluşmamış bir store'un event'i kaçırdığını gerçek çıktıyla gösteriyoruz.
Signal Store İleri Seviye: withEntities, rxMethod, signalMethod, withLinkedState ve Custom Store Feature'ları
Signal Store'un ileri seviye parçaları tekrar eden işi store'dan çıkarır: withEntities koleksiyonları updater'larla yönetir, rxMethod RxJS ile iptal edilebilir async iş yapar, signalMethod aynısını RxJS'siz yapar, custom feature'lar her store'a eklenir. Bookstore'un sepetini entity'lere taşıyor, hızlı aramayı rxMethod ile yazıyor, withRequestStatus() ve SignalStoreFeatureType ile tipli bir log feature'ı kuruyor, tapResponse'suz bir hatanın stream'i bitirdiğini gerçek çıktıyla gösteriyoruz.
NgRx Signal Store'a Giriş: signalStore, withState, withComputed, withMethods ve patchState
NgRx Signal Store, elle yazılmış signal store'un parçalarını hazır feature'larla verir: withState state signal'larını, withComputed türetilmiş değerleri, withMethods ve patchState immutable güncellemeyi, withProps ve withHooks bağımlılıkları ve yaşam döngüsünü. Bookstore'un sepetini component kodu değişmeden çeviriyor; korumalı state'i, _ ile private üyeleri, NgRx 22'nin union DeepSignal'ını, Map tuzağını ve kalıcı state biçimi değişince kaybolan sepeti gerçek çıktılarla gösteriyoruz.
URL'i State Olarak Kullanmak: Query Param'lar, withComponentInputBinding ve Geri Tuşunun Çalışması
Paylaşılması, yenilemede kalması ve geri tuşuyla dönülmesi gereken filtreler URL'de tutulur: query param'lar withComponentInputBinding() ile input'a bağlanır, transform ile doğrulanır ve yalnız router.navigate ile değiştirilir. Bookstore kataloğunu URL'e taşıyor; paylaşılan link'i, geçersiz değerleri, geri tuşunu, arama kutusunda replaceUrl'ün geçmişi nasıl temiz tuttuğunu ve Angular 22'de paramsInheritanceStrategy'nin 'always' olmasını gerçek çıktılarla gösteriyoruz.
Server State'i Yönetmek: resource, httpResource, chain() ve Mutation Sonrası Invalidation
Angular 22'de server state, loading, error, reloading ve local durumlarını kendisi taşıyan resource ailesiyle yönetilir: okuma httpResource ile, yazma HttpClient ile yapılır, mutation'dan sonra resource reload() ile tazelenir. Bookstore'un kitap sayfasında chain() ile bağımlı resource'ları, optimistic yorum eklemeyi ve hatada geri almayı, iki component'in aynı listeyi ayrı çekmesini, NgRx 22'nin withPreviousValueOnLoading'ini ve error'da value() okumayı gerçek çıktılarla gösteriyoruz.
Signal Tabanlı Service State: Okunur Signal, computed ve Angular 22'nin @Service() Decorator'ı ile Store Yazmak
Library'siz bir Angular store'u private bir writable signal, asReadonly() ile açılan okunur görünüm, computed ile türetilmiş değerler ve state'i immutable güncelleyen method'lardan oluşur; ömrünü onu sağlayan injector belirler. Bookstore'un sepetini Angular 22'nin @Service() decorator'ıyla yazıyor, aynı array'i döndüren update'in, withAutoCleanupInjectors() olmadan hiç ölmeyen route-level store'un ve kendi signal'ına yazan effect'in sonuçlarını gerçek çıktılarla gösteriyoruz.
Angular'da State Nedir ve Nerede Yaşamalı? Server, UI, URL ve Form State'ini Ayırmak
State'in yeri iki soruyla belirlenir: veri kime ait (API, adres çubuğu, tarayıcı) ve ne kadar yaşamalı; server state resource'ta, URL state query param'da, local state component'te, paylaşılan client state bir service'te durur, derived değerler ise hiç saklanmaz. Bookstore'un katalog sayfasında dört türün geri tuşu ve yenilemede ne olduğunu gerçek bir koşuyla gösteriyor, API yanıtını global store'a kopyalamanın bayat stok ürettiğini kanıtlıyoruz.