Hesaplanan Durum ve Yöntemler
Türetilmiş durum ve güncelleme yöntemleri ekleyin
Hesaplanan Durum ve Yöntemler, CoddyKit'te ücretsiz bir Angular Academy dersidir. Bu, 4 dersinin 2. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Angular Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Angular Academy kursu toplamda 4 dersten oluşur.
Ham Durumun Ötesinde
Kullanışlı bir mağaza türetilmiş değerler ve davranış sunar. SignalStore bunları okuma modelleri için withComputed ve eylemler için withMethods ile ekler.
withComputed
withComputed, mağazanın mevcut sinyallerini alır ve computed() sinyallerinden oluşan bir nesne döndürür. Bunlar, tüm hesaplanmış değerler gibi sonuçları önbelleğe alır ve otomatik olarak güncellenir.
import { signalStore, withState, withComputed } from '@ngrx/signals';
import { computed } from '@angular/core';
export const CartStore = signalStore(
withState({ items: [] as Item[] }),
withComputed(({ items }) => ({
count: computed(() => items().length),
total: computed(() => items().reduce((s, i) => s + i.price, 0))
}))
);Hesaplanmış Değerleri Okuma
Hesaplanmış üyeler, durum gibi mağazada görünür. Şablonlarda store.count() ve store.total() ifadelerini okuyun; items değiştiğinde bunlar da güncellenir.
template: 'Items: {{ store.count() }} — {{ store.total() }}'withMethods
withMethods, mağazayı alır ve adlandırılmış yöntemler döndürür. İçeride durumu değişmez biçimde güncellemek için patchState kullanın.
import { withMethods, patchState } from '@ngrx/signals';
withMethods((store) => ({
add(item: Item) {
patchState(store, (s) => ({ items: [...s.items, item] }));
},
clear() {
patchState(store, { items: [] });
}
}))Yöntemler Durumu da Okur
Bir yöntemin içinde, güncelleme yapmadan önce karar vermek için mağaza bağımsız değişkenindeki mevcut sinyalleri okuyabilirsiniz.
withMethods((store) => ({
toggle(id: string) {
const exists = store.items().some(i => i.id === id);
if (!exists) return;
patchState(store, (s) => ({
items: s.items.map(i => i.id === id ? { ...i, on: !i.on } : i)
}));
}
}))Yöntemler computed Kullanabilir
withComputed, withMethods'tan önce çalıştığı için yöntemler, mağazanın zaten sunduğu hesaplanmış üyeleri okuyabilir.
withMethods((store) => ({
checkout() {
if (store.total() === 0) return;
// proceed...
}
}))Bağımlılıkları Enjekte Etme
withMethods bir enjeksiyon bağlamında çalışır; bu nedenle HttpClient veya bir yönlendirici gibi hizmetleri almak için içeride inject() çağırabilirsiniz.
withMethods((store, http = inject(HttpClient)) => ({
load() {
http.get<Item[]>('/api/items')
.subscribe(items => patchState(store, { items }));
}
}))Özelliklerin Sıralanması
Özellikler yukarıdan aşağıya birleştirilir. Önce withState'i, ardından durumu okuyan withComputed'ı ve son olarak durumu ve hesaplanmış değerleri okuyan withMethods'u ekleyin. Sıralamayı tersine çevirmek tür hatalarına yol açar.
Kapsülleme
Bileşenler store.add(item) çağrısını yapar veya store.total() değerini okur. Doğrudan patchState çağırmazlar; böylece tüm değiştirme mantığı mağazanın içinde tutulur.
Saf Hesaplanmış Değerler, Yan Etkili Yöntemler
withComputed işlevlerini saf tutun (yalnızca türetme yapın). HTTP çağrıları veya gezinme gibi yan etkileri withMethods içine koyun.
Yöntemleri Test Etme
SignalStore'lar enjekte edilebilir sınıflardır. Testlerde mağazayı TestBed aracılığıyla sağlayın, bir yöntemi çağırın ve ardından durum ile hesaplanmış sinyalleri eşzamanlı olarak doğrulayın.
const store = TestBed.inject(CartStore);
store.add({ id: '1', price: 10 });
expect(store.count()).toBe(1);
expect(store.total()).toBe(10);Hızlı Kontrol
Hesaplanmış değerleri ve yöntemleri ne kadar anladığınızı kontrol edin.
Özet
Bir SignalStore'u, önbelleğe alınmış okuma modelleri için withComputed ve patchState ile enjekte edilen hizmetleri kullanan kapsüllenmiş eylemler için withMethods ile geliştirdiniz. Özelliklerin sırası, her katmanın kendisinden önce gelenleri okuyabilmesini sağlar.
Sıkça Sorulan Sorular
“Hesaplanan Durum ve Yöntemler” dersi ücretsiz mi?
Evet — “Hesaplanan Durum ve Yöntemler” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Angular Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Angular Academy kursu toplamda 4 dersten oluşur.
“Hesaplanan Durum ve Yöntemler” dersinde ne öğreneceğim?
Türetilmiş durum ve güncelleme yöntemleri ekleyin Angular Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
Angular Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te Angular Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 2. dersidir.
“Hesaplanan Durum ve Yöntemler” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu Angular Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her Angular Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- SignalStore Oluşturma
- Hesaplanan Durum ve Yöntemler
- Eş Zamanlı Olmayan İşlemler için rxMethod
- Varlıklar ve Özel Özellikler