Blog

Redux Persist Nedir? Nasıl Kullanılır?

“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.

redux persist

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.

Redux persist kullanımını adım adım aşağıda kod örnekleriyle açıklamaya çalışalım.

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;

react redux persist

3. Öncelikle actiondaki set fonkisyonu için constant bir değer tanımlayalım.

react persist

4. Sonrasında action.js dosyasında set fonksiyonumuzu tanımlayalım.

redux persist

5. Reducer dosyasını oluşturalım ve değişkenimizi tanımlayalım.

redux persist

6. Selector.js’ ten loginState için bir select fonksiyonu yazalım.

redux persist

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.

redux persist

Sonuç

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.

Benzer
Bloglar

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.