Redux Thunk ile başlayın

Devlet, reaksiyon uygulamasının büyük bir parçasıdır, bu nedenle Redux genellikle onunla eşleştirilir. Bu veriler genellikle bir istek ve bir cevap gerektiren bir veritabanından gelir. Bazı uygulamalar için bu iletişim sabit olabilir. Sadece reaksiyon bileşenleri içinde yönetmeye çalışmak zor olabilir.

Bu aynı zamanda bazı yeni problemler sunar - yavaşça yüklenirse ne olursa olsun ya da hiç yüklenmiyor? Eşzamansız verilerle uğraşan her bileşen, bu senaryoları ele almak için mantık içermelidir.

Bir 'thunk' bu duruma yardımcı olabilecek bir kavramdır. Her thunk başka bir işlev döndüren bir fonksiyondur. Bu fonksiyon daha sonra daha sonra bir noktada, geri arama gibi olarak adlandırılabilir. Bir eylem nesnesi yerine bir thunk gönderebilirsek, başka bir olaya tepki olarak bazı ekstra mantık ekleyebiliriz.

Redux Thunk, gönderilen eylemler ve redüktör arasında oturan bir kütüphanedir. Bir thunk gördüğünde, bazı yöntemleri bir başarı veya hata olayı gibi, daha fazla eylem göndermek için kullanılabilecek iade edilen fonksiyona geçer.

• 20 parlak jquery eklentisi

Bu eğitimde, bir JSON dosyasından ziyade bir sunucudan çekilmesine yardımcı olmak için Thunks'tan yararlanacağız. Photoshare - Redux tarafından desteklenen bir fotoğraf yorumu uygulaması.

Yeni bir site projesi var, ama basit kalmak için mi ihtiyacınız var? İşte en iyi rehberliklerimiz Web Sitesi Oluşturucu ve ağ sağlayıcısı hizmet. Dosyaları başkalarıyla paylaşma? Senin Bulut depolama sağ.

Dosyaları indirin Bu eğitim için.

01. Bağımlılıkları kurun

Bu projeye iki parça var - ön uç site ve çalıştığı arka uç sunucuyu açık. Eğitim ön tarafa odaklanırken, fotoğrafları almak için çalışan bir sunucuya ihtiyacımız var. Proje dosyalarını indirin ve hem siteye hem de sunucuya bağımlılıkları yükleyin. Sunucuları her ikisi için de çalıştırın ve arka planda koşmayı bırakın.

 / * Bir terminal içindeki / site * /
& gt; iplik
& gt; iplik başlangıç
/ * İçinde bir terminal / sunucu * /
& gt; iplik
& gt; iplik başlangıç ​​

02. Middleware'i ayarla

Redux Thunk bir ara yazılım - Bu eylemlerin nasıl davranacağını değiştirebilecek eylemler ve redüktörler arasında oturan işlevsellik. Redux, tüm uygulamayı kapsayan birden fazla katman kümesini destekler. Mağaza kullanarak oluşturulduğunda eklenirler. bestelemek yöntem. Ara katman ekle createstore indeks.js içindeki yöntem.

 ithalat {ApplidDdleware, BOBOSE}
"Redux" den;
Thunk'ı "Redux-Thunk" dan ithal edin;
[...]
Const Store = createstore (
RootReducer,
Oluşturun (
Appliddleware (Thunk),
devtülük
)
); 

03. Aksiyon Yaratıcıları Kurun

Şimdi yapmamız gereken ilk şey fotoğrafları galeriye yüklemektir. Düzenli eylemler gibi, çeşitli devletler için zaman uyumsuz bir çağrının alacağı için eylem yaratıcılara ihtiyacımız var. Çoğu olacak Başlat , başarı ve hata hareketler. Bunlar Redux, JavaScript'in ne yaptığını bilmesini sağlar. İçinde Eylemler / Fotoğraflar / Fotoğraflar.js , bu farklı durumlar için üç aksiyon yaratıcısı kurun.

 Const LoadgalleryStart = () = & gt; ({
Tür: load_gallery_start});
Const LoadGallerySuccess Dışa Aktar =
Fotoğraflar = & gt; ({
Tip: load_gallery_success,
fotoğraflar
});
Const Loadgalleryerror = () = & gt dışa aktarma; ({
Tip: load_gallery_error}); 

04. Yükleme için bir thunk oluşturun

Thunks tam olarak aksiyon yaratıcıları ile aynıdır. Hala dönüş değerini gönderiyoruz, ancak bu sefer bir nesne yerine bir işlev döndürür. Daha önce kurduğumuz katman yazılımı, bir gönderim yöntemini döndürülen fonksiyona geçirir. Bu, ilk gönderimden sonra Redux'a daha fazla işlem göndermemizi sağlar. Oluşturmak loadgallery Bir işlevi döndüren yöntem. Şimdilik, galerinin hala yüklendiğini göstermek için bir eylem gönderdim.

 İhracat Const Loadgallery = () = & gt;
Dağıtım = & gt; {
gönderim (loadgallerystart ());
}; 

05. Sunucudan veri yükleyin

Şimdi başında kurduğumuz sunucudan almaya başlamaya hazırız. Bunu kullanarak bunu yapabiliriz eksen - Farklı tarayıcılarda vaatlerle çalışmak üzere tasarlanmış bir paket. İthalat eksen ve içindeki fotoğraflar için bir istek yapın loadgallery . Söz veriyorsa, başarı eylemini gönderin ve hata işlemini göndermezse. Bununla, thunk yapısı tamamlandı.

 Eksenleri "Axios" dan ithalat;
[...]
İade Eksenleri
.get ("http: // localhost: 3001 / photos")
.THEN (yanıtı = & gt; gönderim (
loadgallerysuccess (yanıtı.data)))
.catch (() = & gt; gönderim (
loadgalyeryerror ())); 

06. Thunk'ı gönder

Thunk gönderilinceye kadar hiçbir şey yapmaz. Bunu başka bir işlem gibi reaksiyon bir bileşen içinde yapabiliriz. Fotoğrafları yüklemeye başlamak için iyi bir zaman, kullanıcının ana galeriyi görüntülemektedir. Reaksiyonu kullanabiliriz ComponentDidmount Bir tetikleyici olarak yaşam döngüsü yöntemi, galeriyi kontrol ettikten sonra zaten yüklenmemiş. İçinde Bileşenler / Konteyner / Galeri / Galeri.js göndermek loadgallery ekleyerek eylem mapdispatchtoprops ve içinde aramak ComponentDidmount .

 ComponentDidmount () {
Eğer (! this.props.photosloaded) {
this.Props.loadgallery ();
}
}
İhracat Const MapDispatchToprops =
 Dağıtım = & gt; ({
loadgallery: () = & gt;
gönderim (loadgallery ()),
}); 

07. Başarı hakkında fotoğraf ekleyin

Fotoğraflar sunucudan geri döndüğünde, biz bir Load_gallery_success Fotoğraflarla eylem. Bunu eyalete sokmamız gerekiyor fotoğraflar redüktör. Başa çıkmak Redüktörler / Fotoğraflar / Fotoğraflar.js ve başarı eylemi için bir dava ekleyin. Yükü tüm fotoğrafları bir dizi olarak içerir. Durum güncellendikten sonra, fotoğraf seçicisi fotoğrafları görüntülenecek Galeri bileşenine geçer.

 Case Load_Gallery_Success:
dönüş hareketi. Fotoğraflar; 

08. UI'yi ayarlayın

Halen, fotoğraflar birdenbire yüklendikten sonra ortaya çıkıyor. Daha yavaş bir bağlantıda, kullanıcı yapsa, istek bitene kadar kullanıcı boş bir ekrana bakacak. Fotoğrafları yüklemek için gönderdiğimiz eylemler, arayüzü neler olup bittiğini güncel tutmak için UI redüktöründe de alınabilir. UI redüktöründeki yükleme ve hata bayraklarını güncelleyin redüktörler / ui / ui.js .

 Case Load_Gallery_Error:
Return {... Eyalet,
Yükleme: Yanlış, Hata: True};
case load_gallery_start:
Return {... Eyalet,
Yükleniyor: Doğru, Hata: Yanlış};
vaka load_gallery_success:
return {... Eyalet,
Yükleme: YANLIŞ}; 

09. Yükleme ve hata seçici ekleyin

Galeri fotoğraflarıyla olduğu gibi, çeşitli UI durumlarını Redux'tan çıkarmak için seçicilere ihtiyacımız var. Bunları galeriye iletebiliriz, bu da bir kişi doğru olursa farklı unsurlar oluşturabiliriz. İçinde seçiciler / ui / ui.js , Değerleri çıkarmak için birkaç işlev ekleyin.

 İhracat Const IsgalyerRored =
 State = & gt; state.ui.Error;
İhracat Const IsgalleryLoading =
 State = & gt; state.ui.loading; 

10. GaleriContainer'a veri ekleyin

Seçiciler hazır, şimdi eklenebilirler Galeri Konteyner bileşeni. Onları buraya eklemek, galerinin görüntülenmesinden sorumlu bileşenin verilerin nasıl ulaştığını bilmesi gerektiği anlamına gelir. Başa çıkmak Konteyner / Galeri / Galeri.js ve seçicileri ekleyin MapStateToprops . Durumu bir sonraki adımda gösterilmesine yardımcı olacak değerler için sabitler.

 Const {Hata, Yükleme,
 fotoğraflar} = this.Props;
[...]
Export Const MapStateToprops =
 State = & gt; ({
Hata: isgalleryserred (eyalet),
Yükleme: isgalleryloading (eyalet),
 }); 

11. Yükleme ve hata durumu göster

Hata ve yükleme sahibine sahibiz, şu anda ne zaman aktif olduklarını belirtmek için UI yoktur. Bu sahne Boolean değerleridir, bu da, bileşenlerin doğru olduğunda gösterimini değiştirebileceğimiz anlamına gelir. Emin olmak için render yöntemini güncelleyin. & lt; error ve gt; ve & lt; loading & gt; Bileşenler gerektiğinde galeri yerine render.

 if (error) {
iade & lt; error / & gt;
}
if (yükleniyor) {
iade up; yükleniyor / & gt;
} 

12. Galeri tekrar getirin

Galeri yüklü olan bireysel fotoğrafa geçebiliriz. Fotoğraflardan herhangi birine girmekte ve sayfayı yenilemek, fotoğrafı geri yüklemez, çünkü bu sayfada galeriyi yüklemek için bu sayfada bir talimat yoktur. Açık Konteyner / Fotoğraf / Fotoğraf.js ve galeriyi yükleyin ComponentDidmount gibi Galeri bileşen. tanıtımlanmış Galeri içine zaten yüklendilerse, fotoğrafları tekrar yüklemeye çalışmayacaktır.

 eğer (! This.props.photosloaded) {
this.Props.loadgallery ();
} 

13. Yeni bir yorum ekle

Kullanıcı, yorum bırakmak istedikleri fotoğrafa tıklayabilir. Fotoğraf sunum bileşeni çalıştıracak addynwcomment Bu olduğunda Prop işlevi. İçinde addynwcomment İşlev, kullanıcının fotoğrafın içine tıkladığı noktayı hesaplayın. Sunucu, kaydedildiğinde yuvarlak bir tamsayı yüzdesi değeri gerektirir.

 const photo = e.target
 .getboundingClientRect ();
const üst = e.clientx - Photo.left;
const sol = e.clienty - Photo.top;
Const TOPPC = MATH.ROUND ((üst /
 fotoğraf. genişliği * 100);
Const leftpc = Math.Round ((sol /)
 photo.height) * 100); 

14. Redux'a yorum hakkında söyle

Hesaplanan pozisyonla, daha sonra yorum hakkında Redux'a söylememiz gerekir, böylece yorum formunu görüntüleyebilir. Ekranda yeni yorum eklemek için ayarlanmış bir eylem var. Ekle addynwcomment içine mapdispatchtoprops ve tıklamanın konumunu hesapladıktan sonra arayın.

 this.Props.AdDnewComment (
 toppc, leftpc);
[...]
İhracat Const MapDispatchToprops =
 Dağıtım = & gt; ({
eklenti: (üst, sol) = & gt;
Gönderim (ek bildirme (üst, sol)),
});

15. Yeni yorum hakkında fotoğraf söyleyin

Yeni yorum bilgisi Redux'a geçtiğinde, fotoğraf sunum bileşenine geçmemiz gerekir. Bu, formu bu konumda göstermesini sağlar. Bul GetNewComment seçici, ekle MapStateToprops ve pervaneyi içine geçirin & lt; photo & gt; .

 Export Const MapStateToprops =
 (eyalet, sahne) = & gt; ({
Yeni Kazanma: GetNewComment (eyalet),
});
& lt; fotoğraf [...] newcomment = {
 this.Props.And} / ve gt; 

16. Yorumdaki Thunk'ı arayın

Şimdi fotoğrafa tıklamak yeni yorum formunu getirecektir. Bu, kendi bağlı bir bileşenidir. Form gönderildiğinde, bir Yorum Gönder Prop işlevi ve geçer. Bu yapacağımız bir thunk. Açmak Konteyner / Yeni Koruma / Yeni Koruma.js ve thunk'ı ekleyin mapdispatchtoprops . Bu pervane işlenmiş sunum bileşenine iletin.

 & lt; newcomment [...]
 Gayrimenkul = {iThedComment} / & gt;
İhracat Const MapDispatchToprops =
 Dağıtım = & gt; ({
GİRİŞİM: Yorum = & gt; sevk etmek(
Gönderim (Yorum))
});

17. Thunk için içeriği toplayın

Yeni bir yorum eklemek için thunk, bir başlangıç, başarı ve hata eylemi de dahil olmak üzere galerinin alınması için benzer bir yapıya sahiptir. Bu thunk'a girilen ekstra bir tartışma var - karalamak işlevi. Bu, veri kapmak için geçerli duruma doğrudan erişim sağlar. Oluşturmak Yorum Gönder thunk Eylemler / Yeni Kazanma / Yeni Koruma.js . Her yorum bir fotoğraf ve bir kullanıcı ile ilişkilidir. Bu eğitim için, kullanıcı kimliği içine kodlanmıştır. kullanıcı redüktör.

 İhracat Const Gönderme = Yorum
 = & gt; (gönderim, getState) = & gt; {
Gönderim (GönderimStart ());
const akımphotoid =
getcurrentphotoid (getState ());
Const Kullanıcı =
getCurrentUser (GetState ());
const {sol, üst} =
getSewComment (getState ());
}; 

18. Talebi gönderin

Tüm gerekli verilerde, yorumu gönderebiliriz. Axios bir İleti başa çıkma yöntemi İLETİ İstekler, ikinci argüman bu istekle gönderilecek verilerdir. Thunk'a isteği ekleyin, Sunucunun ne beklediği şey eşleştirmek için yılan davasında verilerden geçer.

 İade Eksenleri
.İleti(
"http: // localhost: 3001 / Yorumlar", {
user_id: user.id,
photo_id: currentphotoid,
yorum Yap,
ayrıldı,
üst
}) 

19. Başarı ve Hata Kolu

AXIS'ten gelen vaadi çözerse veya reddediyorsa, başvuruya bunu söylemeliyiz. Başarılı bir şekilde çözülürse, sunucu yorumun içeriğini geri alır. Bunu başarı eylemiyle geçmeliyiz. Reddedildiği takdirde, bir hata işlemi yapın. Sözünü güncelle sonra ve yakalamak bloklar.

 .Then (({data: {
 kimliği, yorum, sol, üst}}) = & gt;
sevk etmek(
GİRİŞİMLERİMİZ (
kimliği, yorum, sol, üst,
Kullanıcı, currentphotoid)
)
)
.catch (() = & gt; gönderim (
 Submitcommentor ())); 

20. Fotoğrafa Yorum ekle

Şu anda, yorum başarıyla eklendikten sonra ekrandan silinir, ancak sayfa yenilenene kadar görünmez. Yeni yorumu almak için fotoğraf düşürücüleri güncelleyebilir ve geri kalanını görüntülemek için yorumlar dizisine ekleyebiliriz. Düşürücü / Fotoğraf / Photos.js açın ve eylemi ele almak için bir dava ekleyin. Var olan durumu yanlışlıkla mutasyona uğratmamızdan emin olmak için devletin bir kopyasını oluşturun.

 case subtion_comment_success:
const {ID, yorum, üst, sol,
Kullanıcı, PhotoID} = Action.Payload;
const newstate = json.parse (
Json.Stringify (eyalet));
const photo = newstate.find (
fotoğraf = & gt; photo.id === PhotoID);
photo |ments.push ({
kimliği, yorum, sol, üst, kullanıcı
});
newstate dönüş; 

21. Diğer yorumları gizle

Son olarak, eğer bir başka yorum açıksa ve kullanıcı yeni bir yorum eklemek isterse, UI çok dağınıklaşır. Yeni bir yorum oluşuyorsa, yorum kutusunu gizlemeliyiz. Mevcut olana bağlanabiliriz Add_new_comment temizlemek için eylem yorumopen değer. Başa çıkmak redüktör / ui / ui.js ve bunun için bir dava ekleyin.

 vaka add_new_comment:
dönüş {
...durum,
Commentopen: Tanımsız
}; 

Bu makale başlangıçta yaratıcı web tasarım dergisinin 283'ü yayınlandı. Web tasarımcısı . Sayı 283 burada satın al veya Burada web tasarımcısına abone olun .

İlgili Makaleler:

• 5 Awesome Javascript APIS
• Yeniden kullanılabilir reaksiyon bileşenleri geliştirin
• En iyi JavaScript çerçevelerinin 9'u