Gelişmiş ReactJS: React + Redux + Sagas için En İyi Uygulamalar

düşünce için kahve

İlk önce ilk şey, Tepki nedir? Kullanıcı arayüzleri oluşturmak için kullanılan bir JavaScript kütüphanesidir. Çıktıktan bu yana ön uç gelişme manzarasını değiştirdi. Bu nedenle, React veya Vue.js gibi kütüphaneleri öğrenen bir ön uç web geliştiricisi olmak istiyorsanız, günümüz endüstrisinde neredeyse şarttır. React'i öğrenmeye yeni başlıyorsanız, harika bir eğitim. https://reactjs.org/tutorial/tutorial.html.

React'i öğrenmeye başladığım zamanı hatırlıyorum. Her zaman ihtiyaç duyduğum her şeyi asla öğrenemediğim endişesi vardı, sürekli değişen JavaScript dili başımın üstünde beliriyordu ve eğer bir şeyi doğru yaparsam, kendime sormam her zaman en iyisiydi, yapmak için? Kelimenin tam anlamıyla yüzlerce çevrimiçi öğretici, Youtube araştırması ve bitmemiş (ve büyük olasılıkla yıkanmamış) bir fincan kahveden sonra, nihayet React'in JavaScript masasına getirmeye çalıştığını anladım.

Bununla birlikte, her zaman React'in tüm gelişmiş konseptlerini tek bir küçük rehberde toplayan bir ders bulmakta zorlandım.

Ayrıca, büyük bir kaynak kodun içinde kullanıldığında bu kavramları anlamakta zorlandığımı hatırlıyorum. Bu, bu makalenin doldurmaya çalıştığı boşluktur. Gelişmiş araçlar ve kavramlar basit uygulamamıza eklenmiştir, bu yalnızca eğitim amaçlıdır ve uygulamanızın bunlara ihtiyacı yoksa bu kavramları kullanmamalısınız.

Chit-chat ile yeter. Hadi konuşalım kod. Bitmiş kodu bu repodan indirin ve README'yi takip edin, böylece neyi burada inşa edeceğimizi görebilir ve hissedebilirsiniz. https://github.com/jelorivera08/react-starter-pack.

Uygulamanın Açılış sayfası

Yukarıda sayılan sayının durumunu ve ilgili eylemlerini tetikleyen dört düğmeyi görebilirsiniz. Hareketleri kendi kendini açıklar nitelikte.

seçiciler

Counter konteynerindeki selectors.js dosyasına gidin, burada ele aldığımız ilk gelişmiş konsept createSelector. İlk önce, const count değişkeni, state.get (‘count’) kullanarak redux durum ağacının içindeki count durumunu getirir.

Ardından, söz konusu yöntemi kullanarak bir seçici yaratıyoruz. Bu, redux durum ağacından aldığımız durumu / verileri biçimlendirmemize yardımcı olur ve bunu yaparak, durumu yeniden yapılandırmayı ya da hedef durumu her zaman ön plana çıkarmamız gerektiğinde biçimlendirmeyi ele alan yeni işlevleri kodlarken çok zaman kazanırız. -son. Bu örnekte, aldığım durumu değiştirmedim. Ben sadece düz durumu demo amaçlı iade ettim.

Daha sonra elde edilen fonksiyon mapStateToProps içinde ve mapStateToProps ile birlikte kullanılacak, yapılandırılacak olan sonraki şey mapDispatchToProps.

eylemler oluştur

Redüktör işlemlerini ne zaman gönderirseniz, uygulama durumunu değiştirmek için her zaman türünü ve ilgili anahtar kutusunu bir redüktöre daha sonra gireceğini beyan etmemiz gerekir. Kırmızı sostan createActions paketi ile iki kuşa bir taşla vurabiliriz. Bu paketten tam anlamıyla faydalanabilmek için redüktörü reduxsauce ile biçimlendirmeliyiz.

redüktör

Yukarıda bizim app indirgeyici. İlk durum, fromJS API tarafından değiştirilemez duruma getirilir ve paket adı uygulandığında, başlangıçtaki durumu mutasyona uğramaya karşı korur. Tepki, bu konseptte çok katıdır, bu yüzden bunu daima aklınızda tutun. reduxsauce'dan createReducer API'nin iki argümanı vardır.

İlk olarak, ilk durum. İkincisi, eylem türleri için anahtarlara sahip olan ve bir tür bir gönderme çağrısıyla eşleştiğinde, redüktörün ateşleyeceği bir işlev olarak değerleri olan nesne. Birleştirme, ardından redux durum ağacını buna göre değiştirir. Eşzamansız API çağrılarının nasıl yapıldığını bilmeyen gerçek bir hayat uygulaması yok mu? Sağ.

Redux Saga

İşte programımızın destan kısmı. Bizim eylemlerimiz dediğimiz yol dışında her şey aynı. Daha önce yarattığımız tür eyleminden faydalanır ve daha sonra redux durum ağacımızı etkileyecek olan eşzamansız çağrıları göndermek için onları gözlemci destanımızda kullanırız.

Gecikme, uygulamanın daha iyi bir async hissi için ağ gecikmesini alay etmek. Oh, ve son olarak, performansı unutmadığımızdan emin olalım.

kod bölme

Kod bölme, web uygulaması performansını iyileştirmenin harika bir yoludur. JavaScript kodu, bir kullanıcının verilerine göre en fazla parayı alır. Unutmayın, kod bölmeyle, son kullanıcının veri tüketim verimliliği için ihtiyaç duyduğu kodun yalnızca bir kısmını indirmesine izin verir.

Sonuç olarak,

Yazılım mühendisleri daha temiz ve çok daha verimli bir kod oluşturmamıza yardımcı olan birçok paket ve araç var. bir maliyetle, temel sistemi anlama ve React'te düşünmenin bedeli ile gelir.

Öğrenme Davranışı, kodlama paradigmasını, ön taraftaki önceki kodlama zihin setine kıyasla çok daha farklı bir hale getirmenizi gerektirir. Bu makalede bahsettiğim araçlar ve paketler, React'te güzel ve etkili bir şekilde kodlama yapmak için gereken ilkeleri içerir ve bu da olağanüstü bir geliştirici yapan şeydir.

Her zaman küçük şeyler olur.

Bununla birlikte, bu küçük makale ile Tepki Anlayışınızı daha iyi anlamanıza yardımcı olduğumu umuyorum. Şerefe!