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.

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;

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.

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.

Harun Haydar Sofuoğlu

Software Developer