“Anlatım, ReactJS üzerinden yapılacaktır.“
Redux kullandığımız uygulamalarda, sayfa değiştiğinde, yenilendiğinde veya uygulama kapatıp tekrar açıldığında, redux’ taki değişkenlerin tekrar eski haline dönmesi veya sıfırlanması sebebiyle tekrar kullanmak istediğimizde ulaşamayız. Bu yüzden sayfa yenilendiğinde tekrar istek atar ve değişkenleri tekrar setleriz. Özellikle genelde servisten gelen sabit objeler veya arraylerde bu can sıkıcı hale gelir çünkü tekrar servise istek atıp değişkeni tekrar setlemek gerekir.
Redux persist, redux’taki değişkenlerin, sayfa yenilendiğinde, değiştiğinde veya uygulama kapatıp tekrar açıldığında tekrar eski haline dönmesini veya sıfırlanmasını engellemeye yarayan, bu değişkenleri localstorage da saklayan bir pakettir.
Bir örnekle anlatmak gerekirse; Login sayfamızı reducera yazdığımız loginState adında boolean bir değişkene bağladığımızı düşünelim.
Bu değişken true olduğunda login sayfası, eğer false ise dashboard sayfası gözükecektir.
Redux persist kullanmadığımızda sayfa her yenilendiğinde reducer sıfırlanacak, loginState eski haline dönecek yani true olacak ve login sayfası tekrar gözükecektir. Daha önceden login olduğumuz halde tekrar login ekranı önümüze gelecektir.
Ancak redux persist kullanıldığında böyle bir durum yaşanmayacak loginState i true ya setlemediğimiz sürece login sayfası gözükmeyecektir.
1. Kurmamız gereken paketler;
npm i redux npm i react-redux npm i redux-persist npm i reselect
2. Kuracağımız redux, index.js ve App.js dosyalama yapısı su şekilde olacak;
3. Öncelikle actiondaki set fonkisyonu için constant bir değer tanımlayalım.
4. Sonrasında action.js dosyasında set fonksiyonumuzu tanımlayalım.
5. Reducer dosyasını oluşturalım ve değişkenimizi tanımlayalım.
6. Selector.js’ ten loginState için bir select fonksiyonu yazalım.
7. index.js dosyamızı oluşturalım. Eğer bir servise istek atılacak ve saga kullanılacaksa aşağıdaki kod satırlarında commentlenen satırları comment out yaparak kullanabilirsiniz. Eğer sürekli kayıt edilmesini istediğimiz bir değişken varsa bunu whitelist in içine, kayıt edilmesini istemediğimiz bir değişken varsa blacklist in içine ekleyebiliriz. Eğer hiç bir ekleme yapmazsak reducerda olan bütün değişkenler localstorage a kayıt edilir.
Yukarıdaki anlatılan kod örneklerinin tamamını görmek ve denemek için github reposunu ziyaret edebilirsiniz.
Özetlemek gerekirse redux-persist paketi, bir değişkeni tekrar tekrar istek atıp set işlemi yapmak yerine tek bir istekte setleyip siz değiştirmediğiniz sürece aynı kalması sebebiyle kullanışlı bir pakettir.
Diğer blog yazılarımıza göz atmak için burayı tıklayabilirsiniz.
Software Developer
e-Arşiv Fatura Sorgulama Nedir? Nasıl Gerçekleştirilir?
Dijital dönüşüme ister gönüllü ister zorunlu olarak geçmiş olun, alıcılarınız manuel yöntemleri kullanmakta ısrarcıysa süreciniz...
Temiz Kod Yazmak | Temiz kod nasıl yazılır?
Kodlama kuralları, programlama için stil yönergeleridir. Genellikle şunları kapsar: Değişkenler ve fonksiyonlar için adlandırma ve...
Donanım Varlık Yönetimi Nedir?
BT Varlık Yönetimi (ITAM) Nedir? BT Varlık Yönetimi (IT Asset Management), organizasyonların sahip olduğu BT varlıklarının...
Dijital Dönüşüme Koronavirüs İvmesi
Fransız edebiyatçı Alfred de Musset'nin “bütün zorlukların ortasında, fırsatlar yatar” sözünü, Covid19 döneminde dijitalleşme...
SAP Fiori: Konseptler ve En İyi Uygulamalar
SAP Fiori Nedir? SAP Fiori, SAP uygulamalarını geliştirmek için kullanılan bir tasarım dili ve kullanıcı deneyimi (UX) yöntemidir. SAP...
e-Fatura ve e-Arşiv Fatura Arasındaki Farklar
E-Dönüşüm yöntemlerinin yaygınlaşmasıyla birlikte e-Fatura ve e-Arşiv kavramları da hayatımızda yerini aldı. Birbirine çok yakın...
Doğal Dil İşleme Nedir?
Doğal Dil İşleme (Natural Language Processing) Dil, insanlar arasında anlaşmayı sağlayan bir iletişim aracıdır. Sosyal yaşamın en büyük...
SAP S/4HANA Nedir?
SAP S/4HANA, şirketlerin işlemleri gerçekleştirmesine ve iş verilerini gerçek zamanlı olarak analiz etmesine olanak tanıyan SAP HANA bellek...
Ürün Takip Sistemi Nedir?
Ürün takip sistemi, ihraç veya ithal edilen tüm tıbbi cihazların ve kozmetik ürünlerinin üretim bandından başlayarak satılıp...
Mailiniz başarıyla gönderilmiştir en kısa sürede sizinle iletişime geçilecektir.
Mesajınız ulaştırılamadı! Lütfen daha sonra tekrar deneyin.