Kayıtlar

React reducer kullanımı etiketine sahip yayınlar gösteriliyor

React&Redux Firebase FireStore Yeni İçerik Ekleme

Resim
 Sadece fireStore react ile içerik ekleyen bir component yazacağız. Proje oluşturma firebase config ayarları için blogdaki önceki yazıları okumanızı öneriyorum. Öncelikle bir method base component oluşturuyorum. Basit bir şekilde componentimi yazdım. App.Js den de yolunu tanımladım. Excact yaptım ki sadece bu componentim çalışsın. Componentimin görünüşüde bu şekilde oldu gayet basit.  Şimdi onChange ve onClick listenerlarımı handle edeceğim. Methodlarımı yazdım yazmış olduğum methodlarımı onClick ve onChange ekledim.   Denememi yaptığımda başarı bir şekil de state  set ettiğimi görebiliyorum. Şimdi yapmam gereken componentime action ve reducer lerini yazmak. İstersem firestoreyı componentime bağlatım handleClick metdoumu düzenleyip te firesore 'me ekleme işlemide yapabilirdim fakat actions ve reducer kullanacağm. İlk olarak blogAction yazacağım parametre olarakta blog objesi alacak. Bu obje ile fireStore mdeki collectionu ma add...

React&Redux Firebase Authetication işlemleri React

Resim
Firebase oturumu oluşturun. Ardından Authentication seçeneğini seçin Oturum açma yöntemi olarak eposta ve şifre işlemlerini aktifleştirin. İşlemleri  https://github.com/abdullahsuhaisk/ReactReduxFirebaseBlogApp Reposundan da görebilirsiniz. Sırada İndex.js den. FireStore ve FirebaseRedux kütüphanelerini aktifleştirip firebase 'e auth u set etmemiz gerekiyor. İndex.js deki işlemlerim. Sırada Reducerimi oluştrurmak var.. RootReducerım firebase 'e artık bağlandı. Firebase den gelen durumlara state den ulaşabileceğim.Firebase' den neler geliyormuş. Log olarak bir bakalım... Benim Main componentim bu projede dashboard oradan bakacağım. State leri props a gönderip props'u ekranda gösterdik. Consolumuzda gelenler ; Görüldüğü üzere firebase 'in içinde auth olarak geldi. isLoaded:false ve isEmpty:true herhangibi bir oturum açmadığını bize söylüyor. Şimdi firebase consoluma gidip bir tane test user 'i oluşturacağım. Ardından sitem...