React&Redux Firebase Yorum Componeneti tasarımı
Bu ders için react projenizi kurmuş , Firebase config ayarlarını yapmış olmanız gerekmektedir. Bu gereklilikleri yapmadıysanız blogun önceki konularına bakabilirsiniz.
Bu blog sayfasının tamamını kaynak kodlarını gitHub adresinden görebilirsiniz:
https://github.com/abdullahsuhaisk/ReactReduxFirebaseBlogApp
Öncelikle best practise olmadı aslında bu yaptığım. Normal bir db mantığı oldu farklı bir collection tuttum bu collectionda blogId sını tuttum daha sonra bu blogId sine göre ekranda gösterdim. Asıl yapmam gereken Blog collectionun içinde subcollection olarak Comments collectionun tutmam olurdu. Başka bir ilişkisel veri tabanında da sub collection ları kullanmaya çalışırız. Documentasyonu okuyacağım belki ceviririm bile buradan paylaşırım.
Şimdi öncelikle neler yaptım. blogActions da bir CommentAdd methodu oluşturdum. Ardından Reducer 'a tetikleme yaptım. Bu işlemlerde aslında Reducer 'a tetiklemeye pek ihtiyaç yok aslında. Bu reducer kullanımına daha detaylı bakmak lazım. Kısa aslında mantık şu. Daha büyük proje düşünün ve birde spinner. Mesela api ya post yaptımda spinnerı açma olumlu yada olumsuz dönüş yaptığında spinner ı kapata bilirim. Yada mesela submit yaptığımda api da işlem bitene kadar buttonumu kapata bilirim.
Daha sonra Componentimde actionu mu karşıladım on click methoduna set ettim. Bu işlermleri yaparken bir kaç detay var.
Yeni comment için statemden userId, Username, userEmaili alıyorum. Daha önceki derslerimde firebase aut ile profile kullanmayı öğrenmiştik. BlogId yi alırken Comment Componentimi çağıran Componentte props olarak blogId yi set ettim. Comment Componentimde ise localState de alacak.
comments lerimi firestore den çektim. comments değişkenimin içinde bütün commentsler var.
comments lerimi render methodumu içinde map fonksiyonu ile çıkartıyorum. Çıkartırken yalnızca blogid si propsdan gelen İd me eşit olanları çıkartıyorum.
Bu blog sayfasının tamamını kaynak kodlarını gitHub adresinden görebilirsiniz:
https://github.com/abdullahsuhaisk/ReactReduxFirebaseBlogApp
Öncelikle best practise olmadı aslında bu yaptığım. Normal bir db mantığı oldu farklı bir collection tuttum bu collectionda blogId sını tuttum daha sonra bu blogId sine göre ekranda gösterdim. Asıl yapmam gereken Blog collectionun içinde subcollection olarak Comments collectionun tutmam olurdu. Başka bir ilişkisel veri tabanında da sub collection ları kullanmaya çalışırız. Documentasyonu okuyacağım belki ceviririm bile buradan paylaşırım.
Şimdi öncelikle neler yaptım. blogActions da bir CommentAdd methodu oluşturdum. Ardından Reducer 'a tetikleme yaptım. Bu işlemlerde aslında Reducer 'a tetiklemeye pek ihtiyaç yok aslında. Bu reducer kullanımına daha detaylı bakmak lazım. Kısa aslında mantık şu. Daha büyük proje düşünün ve birde spinner. Mesela api ya post yaptımda spinnerı açma olumlu yada olumsuz dönüş yaptığında spinner ı kapata bilirim. Yada mesela submit yaptığımda api da işlem bitene kadar buttonumu kapata bilirim.
Daha sonra Componentimde actionu mu karşıladım on click methoduna set ettim. Bu işlermleri yaparken bir kaç detay var.
Yeni comment için statemden userId, Username, userEmaili alıyorum. Daha önceki derslerimde firebase aut ile profile kullanmayı öğrenmiştik. BlogId yi alırken Comment Componentimi çağıran Componentte props olarak blogId yi set ettim. Comment Componentimde ise localState de alacak.
Clasik reducer...
comments lerimi render methodumu içinde map fonksiyonu ile çıkartıyorum. Çıkartırken yalnızca blogid si propsdan gelen İd me eşit olanları çıkartıyorum.
Yorumlar
Yorum Gönder