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.
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.