useReducer Hook, React'te durum yönetimi için en iyi seçeneklerden biridir. Bu kılavuzu kullanarak useReducer Hook ile yolculuğunuza hızlı bir başlangıç ​​yapın.

Durum yönetimi, kullanıcı arabirimlerindeki verileri işlemek ve güncellemek için bir mihenk taşı görevi gören React geliştirmede çok önemlidir. React'ler kullanımDevlet Hook, durumu yönetmek için basit bir yaklaşım sağlar, ancak karmaşık durumla kullanışsız hale gelir. orası redüktörü kullan Kanca gelir.

bu redüktörü kullan Hook, karmaşık durumları ve geçişleri yönetmek için yapılandırılmış bir metodoloji sunar. Kucaklamak redüktörü kullan Hook, esnekliğin ve verimliliğin kilidini açarak daha temiz koda yol açar.

useReducer Kancasını Anlamak

bu redüktörü kullan Hook, React tarafından sağlanan ve indirgeyici modelinin ilkelerine bağlı kalarak durum yönetimini kolaylaştıran yerleşik bir özelliktir. için düzenli ve ölçeklenebilir bir alternatif sunar. kullanımDevlet Kanca, özellikle karmaşık durumları işlemek için uygundur.

yararlanarak

instagram viewer
redüktörü kullan Hook, hem durumu hem de geçişlerini tek bir redüktör işlevinde birleştirebilirsiniz.

Bu işlev, mevcut durumu ve bir eylemi girdi olarak alır ve ardından yeni durumu üretir. JavaScript'lerde kullanılan indirgeme işleviyle aynı ilkeler üzerinde çalışır. Array.prototype.reduce() yöntem.

useReducer Kancasının Sözdizimi ve Örnek Kullanımı

kullanmak için sözdizimi redüktörü kullan Kanca aşağıdaki gibidir:

sabit [durum, gönderim] = useReducer (redüktör, başlangıçDurumu);

bu redüktörü kullan işlev iki argüman kabul eder:

  • redüktör (işlev): Mevcut duruma ve gönderilen eyleme göre durumun güncellenmesi gereken yolu belirler.
  • başlangıçDurumu (herhangi biri): Bileşen için başlangıç ​​durum değerini temsil eder.

Çağırma üzerine, redüktörü kullan Hook, iki öğeden oluşan bir dizi döndürür:

  • durum (herhangi biri): Geçerli durum değerini belirtir.
  • sevk (işlev): Bu işlev, durumu güncellemek için eylemlerin gönderilmesini sağlar.

kullanımını gösteren aşağıdaki örneği göz önünde bulundurun. redüktörü kullan Basit bir sayacı yönetmede kanca:

içe aktarmak Tepki, { useReducer } itibaren'tepki';
sabit başlangıçDurumu = 0;
sabit redüktör = (durum, eylem) => {
anahtar (Eylem Türü) {
dava'artış':
geri dönmek eyalet + 1;
dava'azaltma':
geri dönmek durum - 1;
varsayılan:
geri dönmek durum;
 }
};


sabit Sayaç = () => {
sabit [sayı, sevk] = reducer kullan (redüktör, ilkDevlet);
sabit işlemeArtımı = () => {
 sevk etmek({ tip: 'artış' });
 };


sabit işlemeAzaltma = () => {
 sevk etmek({ tip: 'azaltma' });
 };


geri dönmek (






};

Yukarıdaki çizimden, bir başlangıç ​​durumu 0 iki tür eylemi işlemekten sorumlu bir indirgeyici işlevin yanında tanımlanır: artış Ve azalma. İndirgeyici işlevi, belirtilen eylemlere göre durumu usulüne uygun olarak değiştirir.

yararlanarak redüktörü kullan Hook, durum başlatılır ve hem mevcut durum değeri hem de gönderme işlevi elde edilir. Gönderme işlevi daha sonra, ilgili düğmelere tıklandığında durum güncellemelerini tetiklemek için kullanılır.

İndirgeyici İşlev Oluşturma

Optimum kullanım için redüktörü kullan Hook, gönderilen eylemlere göre durumun nasıl güncellenmesi gerektiğini açıklayan bir indirgeyici işlevi oluşturabilirsiniz. Bu indirgeme işlevi, geçerli durumu ve eylemi bağımsız değişken olarak kabul eder ve yeni durumu döndürür.

Tipik olarak, bir indirgeme işlevi bir anahtar koşullu deyimi kullanır çeşitli eylem türlerini işlemek ve buna göre durum değişikliklerini gerçekleştirmek.

Yapılacaklar listesini yönetmek için kullanılan bir azaltıcı işlevin aşağıdaki örneğini düşünün:

sabit başlangıçDurumu = [];
sabit redüktör = (durum, eylem) => {
anahtar (Eylem Türü) {
dava'eklemek':
geri dönmek [...durum, eylem.yük];
dava"geçiş":
geri dönmek durum.harita((yapmak) =>
 todo.id action.payload? { ...yapmak, tamamlanmış: !todo.completed }: yapılacak
 );
dava'silmek':
geri dönmek durum.filtre((yapmak) => todo.id !== action.payload);
varsayılan:
geri dönmek durum;
 }
};

Yukarıdaki örnekte, indirgeme işlevi üç farklı eylem türünü işler: eklemek, aç / kapat, Ve silmek. aldıktan sonra eklemek eyleme yükü (yeni bir yapılacaklar öğesi) ekler. durum sıralamak.

durumunda aç / kapat eylem, bu dönüşümlü tamamlanmış belirtilen kimlikle ilişkili yapılacak iş öğesinin özelliği. bu silmek action ise sağlanan kimliğe bağlı yapılacak iş öğesini durum dizisinden eler.

İşlem tiplerinden hiçbiri karşılık gelmezse, indirgeme işlevi mevcut durumu değiştirmeden döndürür.

Gönderim İşlemleri

tarafından kolaylaştırılan durum güncellemelerini gerçekleştirmek için redüktörü kullan Kanca, eylemlerin gönderilmesi vazgeçilmez hale gelir. Eylemler, istenen durum değişikliği türünü açıklayan düz JavaScript nesnelerini temsil eder.

Bu eylemleri ele alma ve sonraki durumu oluşturma sorumluluğu, indirgeyici işlevine aittir.

tarafından sağlanan gönderme işlevi, redüktörü kullan Hook, eylemleri göndermek için kullanılır. Bir eylem nesnesini bağımsız değişken olarak kabul eder, böylece ilgili durum güncellemesini başlatır.

Önceki örneklerde, eylemler sözdizimi kullanılarak gönderilmiştir. gönderim({type: 'actionType'}). Bununla birlikte, eylemlerin ek verileri kapsaması düşünülebilir. yük, güncellemeyle ilgili daha fazla bilgi sağlar. Örneğin:

sevk etmek({ tip: 'eklemek', yük: { İD: 1, metin: 'Ödevini bitir', tamamlanmış: YANLIŞ } });

Bu senaryoda, eklemek action, duruma dahil edilecek yeni yapılacak iş öğesinin ayrıntılarını kapsayan bir yük nesnesi içerir.

UseReducer ile Karmaşık Durumu Yönetme

Gerçek gücü redüktörü kullan Hook, birbirine bağlı çok sayıda değeri ve karmaşık durum geçişlerini kapsayan karmaşık durum yapılarını yönetme kapasitesinde yatmaktadır.

Durum mantığını bir indirgeme işlevi içinde merkezileştirerek, çeşitli eylem türlerinin yönetimi ve durumun sistematik olarak güncellenmesi uygulanabilir bir çaba haline gelir.

Bir senaryo düşünün tepki formu birden fazla giriş alanından oluşur. Her girdinin durumunu ayrı ayrı yönetmek yerine kullanımDevlet, redüktörü kullan Form durumunu bütünsel olarak yönetmek için kanca kullanılabilir.

İndirgeyici işlevi, belirli alanların değiştirilmesi ve tüm formun kapsamlı bir şekilde doğrulanmasıyla ilgili eylemleri ustalıkla işleyebilir.

sabit başlangıçDurumu = {
 isim: '',
 e-posta: '',
 şifre: '',
 isFormGeçerlidir: YANLIŞ,
};
sabit redüktör = (durum, eylem) => {
anahtar (Eylem Türü) {
dava"güncelleme alanı":
geri dönmek { ...durum, [action.payload.field]: action.payload.value };
dava"formu doğrula":
geri dönmek { ...durum, isFormGeçerli: action.payload };
varsayılan:
geri dönmek durum;
 }
};

Örnekte, indirgeyici işlevi iki farklı eylem türüne hitap eder: güncelleme alanı Ve doğrulamaFormu. bu güncelleme alanı action, sağlanan değeri kullanarak durum içindeki belirli bir alanın değiştirilmesini kolaylaştırır.

Tersine, doğrulamaFormu eylem günceller isFormGeçerli sağlanan doğrulama sonucuna dayalı özellik.

istihdam ederek redüktörü kullan Form durumunu yönetmek için kanca, tüm ilişkili durumlar ve eylemler tekil bir varlık içinde birleştirilir, böylece anlama ve bakım kolaylığı artar.

useReducer'ı Diğer Durum Yönetimi Çözümleriyle Karşılaştırma

rağmen redüktörü kullan Hook, durum yönetimi için güçlü bir araç olarak duruyor, React ekosistemindeki alternatif durum yönetimi çözümleriyle karşılaştırıldığında, farklılıklarını ve ödünleşimlerini kabul etmek hayati önem taşıyor.

kullanımDevlet

bu kullanımDevlet Bir bileşen içindeki basit, yalıtılmış durumları yönetmek için kanca yeterlidir. Sözdizimi şuna kıyasla daha özlü ve basittir: redüktörü kullan. Bununla birlikte, karmaşık durum veya durum geçişleri için, redüktörü kullan daha organize bir yaklaşım sağlar.

Redux

Redux, önde gelen bir durum yönetimi kitaplığını temsil eder React uygulamaları için. Şuna benzer bir redüktör modeline yapışır: redüktörü kullan, yine de merkezi bir mağaza, ara yazılım desteği ve zamanda yolculuk hata ayıklaması gibi ek özellikler sağlar.

Redux, karmaşık durum yönetimi gereksinimleri gerektiren büyük ölçekli uygulamalar için idealdir. Ancak, daha küçük projeler veya daha basit devlet yönetimi ihtiyaçları için, redüktörü kullan hafif ve daha basit bir alternatif olarak hizmet verebilir.

Bağlam API'sı

React'in Context API'si, durum paylaşımını etkinleştirir pervane delmeye başvurmadan birden fazla bileşen arasında. İle birlikte redüktörü kullan, merkezi bir durum yönetimi çözümü sağlayabilir.

Context API ve redüktörü kullan kayda değer bir güce sahip olsa da, tek başına useReducer kullanımıyla yan yana getirildiğinde ek karmaşıklık getirebilir.

Bağlam API'si en iyi şekilde, durumu derinlemesine iç içe geçmiş bileşenler arasında paylaşma zorunluluğu olduğunda veya karmaşık bir bileşen hiyerarşisiyle karşı karşıya kalındığında kullanılır. Uygun bir durum yönetimi çözümünün seçimi, eldeki uygulamanın özel gereksinimlerine bağlıdır.

Orta büyüklükteki projeler için, redüktörü kullan Redux veya Context API'ye etkili ve daha basit bir alternatif olduğunu kanıtlayabilir.

Devlet Yönetiminin Basitliğini Ortaya Çıkarma

useReducer Hook, React uygulamalarında durum yönetimini basitleştirmek için güçlü bir araçtır. İndirgeyici modelin ilkelerine bağlı kalarak, karmaşık durum ve durum geçişlerini ele almak için yapılandırılmış ve ölçeklenebilir bir yaklaşım sunar.

useState Hook ile birlikte kullanıldığında, useReducer şuna hafif bir alternatif olarak hizmet edebilir: Redux veya Context API gibi kitaplıklar, özellikle daha küçük ve orta ölçekli bağlamda projeler.