“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
Özellikle finans ve muhasebe departmanlarında gerçekleştirilen pek çok işlem dijital dönüşüm rüzgarıyla beraber elektronik ortama...
Daha önceki yazılarımızda Go programlama diline giriş yapmış ve ardından Go programlama dili ile örnek bir Rest API yaratmıştık. Bu...
FinTech yani finansal teknolojiler kapsamı günden güne genişlemeye devam ediyor. Finansal teknolojilere olan talep 2020 yılında özellikle...
Teknolojik gelişmeler sayesinde her şeyin çok hızlı değiştiği bir çağda işletmeler, günlük işlerini sistemli bir hale getirmek...
Koronavirüs sebebiyle yaşadığımız pandemi döneminde, dijital dönüşüm çözümleri sayesinde muhasebe işlemlerinin büyük bir kısmının...
TC. Ticaret Bakanlığı’nın, Ticari İletişim ve Ticari Elektronik İletiler Hakkında yayınladığı yönetmelikte, hizmet sağlayıcı...
Dijitalleşme sürecini tüm iş planlarına entegre edemeyen şirketler, alanlarında muadil ürün ve hizmet üreten rakiplerinin gerisinde...
MDP SAP e-Hesap özeti çözümü, tüm banka işlemlerinin SAP üzerinden anlık takibinin yapılmasını ve muhasebe kayıtlarının...
İşletmeniz büyüdükçe, BT ihtiyaçlarınızın kapsamı da büyür. Bu ihtiyaçları karşılamak için verilen bazı kararlar, kurumsal...
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.