Tüm platformlarda basit şekilde veri saklama ve okuma işlemleri için key-value şeklinde veri saklayan bazı yazılımlar kullanırız. React native tarafında da key-value şeklinde veri yazma ve okuma işlemleri için AsyncStorage denilen bir yapı kullanıyoruz.
React Native AsyncStorage Kullanımı
Daha gelişmiş veri saklama yöntemi olarak cihazda bir üst seçenek olarak Sqlite’ı değerlendirebilirsiniz yada cloud bir çözüm için de Firebase’e bakabilirsiniz ama makalemizin konusu olarak AyncStorage’de nasıl key-value veri saklayabileceğimizi göreceğiz. AsyncStorage basit olarak string türde veri saklamaktadır o yüzden obje tutmanız gereken durumlardan JSON.stringify kullanılarak objeyi serialize edip string olarak saklayabilirsiniz. Özetleyecek olursak AsynStorage veriyi şifresiz, asenkron, kalıcı, key-value şeklinde saklayan bir yapıdır. LocalStorage yerine kullanmalısınız daha güvenlidir.
iOS’da küçük değerler serialize edilmiş olarak sözlükte(dictionary) ama daha büyük değerler ise ayrı dosyalar olarak saklanmaktadır. Anroid’de ise AsyncStorage için native tarafta RocksDB yada SQLite’dan hangisi mevcut ise otomatik olarak değerler bu 2 seçenekten birinde saklanıp yönetilmektedir.
AsynStorage Javascript API’si oldukça basit, temiz ve anlaşılırdır metod isimlerinden bile herhangi bir yardımcı kaynağa yada dökümantasyona ihtiyaç duymadan kolayca kullanabilirsiniz.
Örnek olarak alttaki gibi AsynStorage’i import edebilirsiniz.
1 | import {AsyncStorage} from 'react-native'; |
Kullanımdan Kaldırıldı(DEPRECATED): AsyncStorage react-native paketinden import edilerek kullanılabilir ama yakın zamanda kaldırılacak. O yüzden https://github.com/react-native-community/async-storage paketini yükleyin ki ilerleyen zamanlarda projenizde herhangi bir sıkıntı yaşamayın.
Eğer https://github.com/react-native-community/async-storage kaynağından paketi kurup sonrasında problem yaşamak istemiyorsanız alttaki komut ile paket kurulumunu gerçekleştirebilirsiniz.
Alttaki şekilde import ederek paketi kullanabilirsiniz.
1 | import AsyncStorage from '@react-native-community/async-storage'; |
Bundan sonraki örnekler @react-native-community/async-storage paketi üzerinden verilecektir. AsyncStorage metodlarının tamamı Promise olarak çalışmaktadır o yüzden await keyword’ünü kullanabilir yada await kullanamadığınız durumda then-catch gibi Promise callback fonksiyonlarını da rahatlıkla kullanabilirsiniz.
setItem
Sözdizimi
1 | static setItem(key: string, value: string, [callback]: ?(error: ?Error) => void) |
Altta göreceğiniz gibi tek satırda veri saklama işlemi yapabiliyorsunuz. Fakat dikkat etmeniz gereken bir durum var key ve value değerleri string olmak zorundadır. Key’in string olmasını anlatıkta value’ya obje set etmem gerekecek ne yapıcam o zaman diyeceksiniz. Bunun içinde JSON.stringify fonksiyonunu kullanarak objelerinizi serialize edebilirsiniz.
1 2 3 4 5 6 7 | veriSakla = async () => { try { await AsyncStorage.setItem('@key', 'value') } catch (e) { // Kaydetme hatası } } |
getItem
Sözdizimi
1 | static getItem(key: string, [callback]: ?(error: ?Error, result: ?string) => void): Promise |
Bu fonksiyonda bir üstteki setItem’ın tam tersi işlem olarak daha önce yazmış olduğunu değeri okuma işlemi yapmaktadır. Geri dönen veri tabii ki string olacaktır veri saklama sırasında obje olan bir veriyi saklamak için nasıl JSON.stringify kullandıysak string olarak dönen değeri objeye dönüştürmek için JSON.parse fonksiyonunu kullanabiliriz.
1 2 3 4 5 6 7 8 9 10 | veriGetir = async () => { try { const value = await AsyncStorage.getItem('@key') if(value !== null) { // Elde edilen veri } } catch(e) { // Veri okuma hatası } } |
removeItem
Sözdizimi
1 | static removeItem(key: string, [callback]: ?(error: ?Error) => void) |
Birinci parametresinde göreceğiniz gibi sizden istemiş olduğu key değeri ile eşleşen bir kayıt olması durumunda ilgili kaydın silinmesini sağlar.
mergeItem
Sözdizimi
1 | static mergeItem(key: string, value: string, [callback]: ?(error: ?Error) => void) |
clear
AsyncStorage’in itemlarının temizlemesini sağlar.
Sözdizimi
1 | static clear([callback]: ?(error: ?Error) => void) |
getAllKeys
Sözdizimi
Tüm AsyncStorage keylerini almayı sağlıyor.
1 | static getAllKeys([callback]: ?(error: ?Error, keys: ?Array<string>) => void) |
flushGetRequests
Sözdizimi
1 | static flushGetRequests(): [object Object] |
multiGet
Sözdizimi
Birden fazla vereceğiniz key listesine göre keylere karşılık gelen değerleri getirir.
1 | static multiGet(keys: Array<string>, [callback]: ?(errors: ?Array<Error>, result: ?Array<Array<string>>) => void) |
multiSet
Sözdizimi
Birden fazla set işleminin yapılmasını sağlıyor.
1 | static multiSet(keyValuePairs: Array<Array<string>>, [callback]: ?(errors: ?Array<Error>) => void) |
multiRemove
Sözdizimi
Birden fazla vereceğiniz key listesine ait kayıtların silinmesini sağlar.
1 | static multiRemove(keys: Array<string>, [callback]: ?(errors: ?Array<Error>) => void) |
multiMerge
Sözdizimi
1 | static multiMerge(keyValuePairs: Array<Array<string>>, [callback]: ?(errors: ?Array<Error>) => void) |
📚 Diğer React Native Makaleleri
📚 Kaynaklar
- https://facebook.github.io/react-native/docs/asyncstorage
- https://github.com/react-native-community/async-storage
✏️ Lütfen olumlu-olumsuz tüm görüşlerinizi bana yorum yada mail yolu ile iletmeyi ihmal etmeyin.
🔗 Sosyal medya kanallarından makaleyi paylaşarak destek olursanız çok sevinirim.
👋 Bir sonraki makalede görüşmek dileğiyle.
1 Response
[…] React Native AsyncStorage Kullanımı […]