Angular Academy · Ders

Durumu Değişmez Şekilde Güncelleme

Sinyal durumuna değişmez güncellemeler uygulayın

Durumu Değişmez Şekilde Güncelleme, CoddyKit'te ücretsiz bir Angular Academy dersidir. Bu, 4 dersinin 3. 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.

Değişmezlik Neden Önemlidir?

Sinyaller değişikliği başvuruya göre algılar. Bir dizi veya nesneyi yerinde değiştirirseniz başvuru aynı kalır ve ona bağlı computed() sinyalleri yeniden hesaplanmayabilir. Her zaman yeni bir başvuru üretin.

Değişiklik Tuz||||ağı

Mevcut bir diziye öğe eklemek, başvuruyu değiştirmeden diziyi değiştirir. Bundan kaçının.

// BAD: mutates in place, reference unchanged
this._items.update(list => { list.push(item); return list; });

Dizilerde Yayma İşleci

Başvurunun değişmesi ve tüketicilerin yeniden çalışması için yayma işlecini kullanarak yeni bir dizi oluşturun.

// GOOD: new array reference
this._items.update(list => [...list, item]);

Öğeleri Kaldırma

Özgün diziyi değiştirmeden yepyeni bir dizi döndüren filter() işlevini kullanın.

removeItem(id: string) {
  this._items.update(list => list.filter(i => i.id !== id));
}

Tek Bir Öğeyi Güncelleme

Yeni bir dizi döndürmek için map() kullanın; eşleşen nesneyi yeni bir kopyaya yayarak iç başvurunun da değişmesini sağlayın.

markDone(id: string) {
  this._items.update(list =>
    list.map(i => i.id === id ? { ...i, done: true } : i));
}

Nesnelerde Yayma İşleci

Nesne durumunda önceki nesneyi yayın ve değişen alanların üzerine yazın. İç içe nesnelerin de kendi yayma işlemlerine ihtiyacı vardır.

private _profile = signal({ name: '', address: { city: '' } });

setCity(city: string) {
  this._profile.update(p => ({ ...p, address: { ...p.address, city } }));
}

Yeni Değerle set Kullanma

Durumu tamamen değiştirirken set() ile yeni bir nesne kullanmak, yeni bir başvuru sağladığınız için doğal olarak değişmezdir.

reset() {
  this._profile.set({ name: '', address: { city: '' } });
}

computed Neden Buna Bağlıdır?

Hesaplanmış okuma modelleri sinyalin başvurusuna bağlı olduğundan değişmez güncellemeler yeniden hesaplanmalarını garanti eder. Aynı dizi başvurusunu koruyan bir değişiklik, toplamların ve filtrelerin fark edilmeden güncelliğini yitirmesine neden olabilir.

Yardımcı Kalıplar

Depo yöntemlerinin okunabilir ve tutarlı kalması için yaygın dönüşümlere yönelik küçük, saf yardımcı işlevler çıkarın.

const upsert = (list: Item[], item: Item) =>
  list.some(i => i.id === item.id)
    ? list.map(i => i.id === item.id ? item : i)
    : [...list, item];

save(item: Item) { this._items.update(l => upsert(l, item)); }

Derin İç İçe Yapılara Dikkat

Derin iç içe geçmiş durum, çok sayıda yayma işlemi anlamına gelir. Güncellemeler zorlaşırsa durum şeklini düzleştirin veya her güncellemenin küçük bir bölüme dokunması için durumu birden çok sinyale ayırın.

Değişmezlik Hata Ayıklamaya Yardımcı Olur

Her güncelleme yeni bir başvuru ürettiği için zaman içindeki anlık görüntüleri karşılaştırabilir, önceki ve sonraki durumu günlüğe yazabilir ve arka planda yapılan yerinde değişiklikler konusunda endişelenmeden değişiklikleri değerlendirebilirsiniz.

Hızlı Kontrol

Değişmez sinyal güncellemelerini ne kadar kavradığınızı test edin.

Özet

Değişmez güncelleme kalıplarını öğrendiniz: diziler ve nesneler için yayma, düzenlemeler ve kaldırmalar için map/filter, set aracılığıyla yeni başvurular ve başvuru eşitliğinin doğru reaktiflik için değişmezliği neden gerekli kıldığı.

Sıkça Sorulan Sorular

“Durumu Değişmez Şekilde Güncelleme” dersi ücretsiz mi?

Evet — “Durumu Değişmez Şekilde Güncelleme” 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.

“Durumu Değişmez Şekilde Güncelleme” dersinde ne öğreneceğim?

Sinyal durumuna değişmez güncellemeler uygulayın 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 3. dersidir.

“Durumu Değişmez Şekilde Güncelleme” 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

← Angular Academy Sayfasına Dön