Redux Persist Nedir? ReactJS ile Adım Adım Kullanım Rehberi

Redux Persist, Redux kullanan React uygulamalarında durum yönetiminin en önemli sorunlarından birini çözer: sayfa yenilendiğinde veya uygulama yeniden açıldığında Redux store’unun sıfırlanmasını engellemek. Bu rehberde Redux Persist’in ne olduğunu, neden kullanıldığını ve ReactJS üzerinden adım adım nasıl uygulandığını açıklıyoruz.

Not: Bu anlatım ReactJS üzerinden yapılacaktır.

Redux ve Kalıcılık Sorunu

Redux kullandığımız uygulamalarda sayfa değiştiğinde, yenilendiğinde veya uygulama kapatılıp tekrar açıldığında, Redux’taki değişkenlerin tekrar eski haline dönmesi veya sıfırlanması sebebiyle bu değişkenlere ulaşamayız. Bu yüzden sayfa yenilendiğinde tekrar istek atılır ve değişkenler yeniden setlenir. Özellikle servisten gelen sabit objeler veya array’lerde bu can sıkıcı hale gelir — çünkü tekrar servise istek atılıp değişken yeniden setlenmek zorunda kalınır.

Bu problemi somutlaştırmak için bir örneğe bakalım: Login sayfamızı reducer’a 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ı, 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 giriş yapmış olmamıza rağmen tekrar login ekranıyla karşılaşırız.

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 Nedir?

Redux Persist, Redux’taki değişkenlerin sayfa yenilendiğinde, değiştiğinde veya uygulama kapatılıp tekrar açıldığında sıfırlanmasını engelleyen; bu değişkenleri localStorage‘da saklayan bir pakettir. Temel çalışma prensibi şudur: uygulama her açıldığında Redux store’u localStorage’dan yeniden yüklenir (rehydrate) ve kullanıcı bıraktığı yerden devam edebilir.

Uygulamada hangi reducer’ların persist edileceğini whitelist ile belirleyebilir, persist edilmesini istemediklerinizi ise blacklist ile dışarıda bırakabilirsiniz. Eğer hiçbir ekleme yapmazsanız reducer’daki tüm değişkenler localStorage’a kaydedilir.

Kurulum: Gerekli Paketler

Aşağıdaki paketlerin kurulması gerekmektedir:

npm i redux
npm i react-redux
npm i redux-persist
npm i reselect

Dosya Yapısı

Kuracak olduğumuz Redux ile index.js ve App.js dosyalama yapısı şu şekilde olacak:

Adım Adım Uygulama

Adım 1: Action’daki set fonksiyonu için constant bir değer tanımlayalım.

Adım 2: action.js dosyasında set fonksiyonumuzu tanımlayalım.

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

Adım 4: selector.js‘ten loginState için bir select fonksiyonu yazalım.

Adım 5: 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 yorum satırı yapılan satırları aktif hale getirebilirsiniz. Whitelist’e sürekli kaydedilmesini istediğiniz değişkenleri, blacklist’e ise kaydedilmesini istemediklerinizi ekleyin.

Whitelist ve Blacklist Kullanımı

Redux Persist’in en önemli özelliklerinden biri, hangi reducer’ların localStorage’a kaydedileceğini kontrol edebilmenizdir. Bu kontrol iki yöntemle sağlanır:

Whitelist: Yalnızca listede belirttiğiniz reducer’lar persist edilir. Diğer tüm reducer’lar her sayfa yenilenmesinde sıfırlanır. Bu yöntem, hangi verilerin kalıcı olacağını kesin olarak kontrol etmek istediğinizde idealdir.

Blacklist: Listede belirttiğiniz reducer’lar persist edilmez; geri kalanların tamamı kaydedilir. Persist edilmesini kesinlikle istemediğiniz hassas veya geçici veriler için kullanılır.

Temiz ve sürdürülebilir React kodu yazımı hakkında daha fazla bilgi için Temiz Kod Yazmak yazımızı, JavaScript’in temel veri yapıları için ise JavaScript Array Methodları yazımızı inceleyebilirsiniz.

Sonuç

Ö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ı sayesinde oldukça kullanışlı bir pakettir. Kullanıcı deneyimini iyileştirirken aynı zamanda gereksiz servis isteklerini azaltarak uygulama performansına da katkı sağlar.

Yukarıdaki kod örneklerinin tamamını görmek için redux-persist resmi GitHub reposunu ziyaret edebilirsiniz. Diğer blog yazılarımıza göz atmak için blog sayfamızı ziyaret edebilirsiniz.

Sık Sorulan Sorular

Redux Persist localStorage’a hangi verileri kaydeder?

Varsayılan davranışta Redux Persist, reducer’daki tüm değişkenleri localStorage’a kaydeder. Whitelist kullanarak yalnızca seçtiğiniz reducer’ların kaydedilmesini, blacklist kullanarak bazı reducer’ların kaydedilmemesini sağlayabilirsiniz. Bu sayede hassas ya da geçici verilerinizi persist kapsamının dışında tutabilirsiniz.

Redux Persist Redux Toolkit ile birlikte kullanılabilir mi?

Evet. Redux Toolkit (RTK) ile redux-persist birlikte kullanılabilir; ancak RTK’nın serializability middleware’i persist actions için uyarı verebilir. Bu sorunu çözmek için configureStore yapılandırmasında middleware ayarına serializableCheck: { ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER] } eklenmesi gerekir.

Redux Persist ile React Native’de state kalıcılığı nasıl sağlanır?

React Native’de web tarayıcısının localStorage’u bulunmaz. Bu nedenle @react-native-async-storage/async-storage paketini kurup persistConfig yapılandırmasında storage: AsyncStorage olarak belirtmeniz gerekir. Kalan yapılandırma React web uygulamalarıyla özdéştir.

Redux Persist kullanırken store sıfırlanması gerekirse ne yapmalıyım?

Kullanıcı çıkış yaptığında ya da store’un tamamen temizlenmesi gerektiğinde persistor.purge() metodunu çağırabilirsiniz. Bu metod localStorage’daki persist edilmiş tüm verileri temizler ve store bir sonraki yüklenmede başlangıç durumuna döner.

Referanslar

redux-persist — Resmi GitHub Reposu
Redux — Resmi Dokümantasyon
Temiz Kod Yazmak — MDP Group
JavaScript Array Methodları — MDP Group

Harun Haydar Sofuoğlu

Software Developer