Angular Academy · Ders

Efektler ve Yan Etkiler

Sinyal değişikliklerine efektlerle tepki verin.

Efektler ve Yan Etkiler, 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.

Effect Nedir

Bir effect(), okuduğu sinyallerden herhangi biri değiştiğinde bir işlev çalıştırır. computed'dan farklı olarak effect'ler yan etkiler içindir: günlük kaydı tutma, localStorage ile eşitleme, API çağırma ve DOM'u değiştirme.

Effect'ler bir değer döndürmez.

Effect Oluşturma

Bir effect hemen bir kez çalışır, ardından izlenen bir sinyal her değiştiğinde yeniden çalışır.

import { signal, effect } from '@angular/core';

const count = signal(0);

effect(() => {
  console.log('count is', count());
});
// logs "count is 0" immediately
count.set(5); // logs "count is 5"

Effect'ler Bir Enjeksiyon Bağlamına İhtiyaç Duyar

Varsayılan olarak effect() bir enjeksiyon bağlamında oluşturulmalıdır; bu genellikle bir bileşenin, yönergenin veya hizmetin oluşturucusu ya da alan başlatıcısıdır.

import { Component, signal, effect } from '@angular/core';

@Component({ selector: 'app-x', template: '' })
export class XComponent {
  user = signal('guest');
  constructor() {
    effect(() => console.log('user:', this.user()));
  }
}

Otomatik Bağımlılık İzleme

Hesaplanmış değerlerde olduğu gibi effect'ler de çalışma zamanında tam olarak okudukları sinyalleri izler. Koşullu okumalar yalnızca ilgili koda ulaşıldığında izlenir.

const enabled = signal(true);
const value = signal(10);

effect(() => {
  if (enabled()) {
    console.log(value());
  }
});
// When enabled() is false, value is not a dependency

Sinyalleri localStorage ile Eşitleme

Effect'lerin klasik kullanım alanlarından biri, durumu her değiştiğinde kalıcı hâle getirmektir.

const theme = signal('light');

effect(() => {
  localStorage.setItem('theme', theme());
});

theme.set('dark'); // writes "dark" to localStorage

Effect'ler Değer Döndürmez

Türetilmiş bir değere ihtiyacınız varsa computed() kullanın. Effect'ler dönüş değeri olmayan eylemler içindir; sonuçları doğrudan yan etkinin kendisidir.

// WRONG: trying to derive state in an effect
// effect(() => this.total = this.a() + this.b());

// RIGHT: derive with computed
// total = computed(() => this.a() + this.b());

Effect'lerin İçinde Sinyal Ayarlama

Döngüleri önlemek için Angular, varsayılan olarak bir effect'in içinde sinyallere yazılmasına izin vermez. Buna gerçekten ihtiyacınız varsa { allowSignalWrites: true } geçin; ancak türetmeler için computed kullanmayı tercih edin.

effect(() => {
  const v = source();
  derived.set(v * 2);
}, { allowSignalWrites: true });
// Use sparingly; computed() is usually better

EffectRef ile Elle Temizleme

effect() bir EffectRef döndürür. Sahibi yok edilmeden önce effect'i elle durdurmak için .destroy() çağırın.

import { effect, EffectRef } from '@angular/core';

const ref = effect(() => console.log(value()));
// later
ref.destroy(); // effect no longer runs

Effect'ler Otomatik Olarak Temizlenir

Bir bileşende oluşturulan effect, bileşen yok edildiğinde otomatik olarak yok edilir. .destroy() işlevini kendiniz çağırmanız nadiren gerekir.

Effect'ler Oluşturmadan Sonra Çalışır

Effect'ler zamanlanır ve değişiklik algılamadan sonra, mikro görev başına gruplandırılarak çalıştırılır. Birden çok eşzamanlı sinyal değişikliği effect'i yalnızca bir kez tetikler.

const a = signal(0);

effect(() => console.log(a()));

a.set(1);
a.set(2);
a.set(3);
// Effect runs once with the final value 3 (batched)

effect mi computed mı Ne Zaman Kullanılmalı

computed: sinyallerden bir değer türetir (katışıksız).
effect: harici bir işlem gerçekleştirerek sinyallere tepki verir (katışıksız değildir).

Bir effect'ten değer döndürdüğünüzü fark ederseniz büyük olasılıkla computed kullanmalısınız.

Kısa Kontrol

Effect'leri ne kadar anladığınızı test edin.

Özet: Effect'ler

effect(), izlenen sinyalleri değiştiğinde bir işlevi yalnızca yan etkiler için çalıştırır.

Hemen bir kez, ardından her bağımlılık değişikliğinde çalışır.
Bir enjeksiyon bağlamına ihtiyaç duyar.
Sahibiyle birlikte otomatik olarak yok edilir; elle denetim için bir EffectRef döndürür.
Türetmeler için computed, eylemler için effect kullanın.

Sırada: effect'lerin içindeki kaynakları temizleme.

Sıkça Sorulan Sorular

“Efektler ve Yan Etkiler” dersi ücretsiz mi?

Evet — “Efektler ve Yan Etkiler” 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.

“Efektler ve Yan Etkiler” dersinde ne öğreneceğim?

Sinyal değişikliklerine efektlerle tepki verin. 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.

“Efektler ve Yan Etkiler” 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