React Academy · Ders

useReducer Temelleri ve Eylem Kalıpları

useReducer'ı öğrenin: durum + reducer(state, action) → sonraki durum. Birden çok alanı güncellemek için açık eylemler (type, payload) kullanın.

2. ders / 38 adım

useReducer Temelleri ve Eylem Kalıpları, CoddyKit'te ücretsiz bir React Academy dersidir. Bu, 3 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, React Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. React Academy kursu toplamda 3 dersten oluşur.

useReducer neden kullanılır?

Amaç: Güncellemeleri tek bir indirgeyici işleviyle yönetmek için useReducer kullanın. Birden fazla alan birlikte değiştiğinde bu yaklaşım kullanışlıdır.

  • Durum nesnesi
  • Eylemler: tür + yük
  • Saf indirgeyici(durum, eylem)

İndirgeyicinin yapısı

İndirgeyici, mevcut durumu ve bir eylemi alıp sonraki durumu döndürür. İndirgeyiciyi saf tutun (yan etkiler olmadan). INCREMENT, RESET veya UPDATE_FIELD gibi küçük eylem türleri kullanın.

Örnek: useReducer ile sayaç

Küçük bir sayaç, useReducer kullanarak durum → eylem → sonraki durum döngüsünü gösterir.


<div id="root"></div>

Eylem örüntüleri

Eylemleri basit tutun:

  • tür: kısa bir fiil (ör. UPDATE_FIELD)
  • yük: gereken veriler
  • Yazım hatalarını önlemek için isteğe bağlı küçük eylem oluşturucuları

Örnek: indirgeyici ile form

Bir form indirgeyicisi, tek bir UPDATE_FIELD eylemiyle birden fazla alanı yönetir. Tüm güncellemeler tek bir yerden denetlenir.


<div id="root"></div>

İpuçları ve tuzaklar

İpuçları:

  • İndirgeyicileri saf ve küçük tutun.
  • İlişkili alanları tek bir durum nesnesinde gruplayın.
  • Açık eylem adları kullanın; birbirine benzeyen çok sayıda durumdan kaçının.

useReducer seçimi kontrolü

Birden fazla useState çağrısı yerine useReducer genellikle ne zaman tercih edilir?

Özet

Özet: Saf bir indirgeyici tanımlayın, basit eylemler gönderin ve birden fazla alanın güncellemelerini tek bir yerde yönetin. Birden çok değer birlikte değiştiğinde useReducer'ı seçin.

Başlamak ücretsiz

Yapay zeka eğitmeniyle React öğren — ücretsiz

Tarayıcında gerçek kod yaz ve çalıştır, 7/24 yapay zeka eğitmeninden anında yardım al; web'de ya da uygulamada kaldığın yerden devam et.

Kurslar
88
Dersler
324

Sıkça Sorulan Sorular

“useReducer Temelleri ve Eylem Kalıpları” dersi ücretsiz mi?

Evet — “useReducer Temelleri ve Eylem Kalıpları” 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 React Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. React Academy kursu toplamda 3 dersten oluşur.

“useReducer Temelleri ve Eylem Kalıpları” dersinde ne öğreneceğim?

useReducer'ı öğrenin: durum + reducer(state, action) → sonraki durum. Birden çok alanı güncellemek için açık eylemler (type, payload) kullanın. React 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.

React Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te React 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, 3 dersinin 2. dersidir.

“useReducer Temelleri ve Eylem Kalıpları” 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 React Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her React 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

  1. Context Temelleri ve Özellik Aktarımından Kaçınma
  2. useReducer Temelleri ve Eylem Kalıpları
  3. Context + Reducer: Basit Durum Kapsayıcıları
← React Academy Sayfasına Dön