React Native uygulamanız için bu eşzamansız ve küresel anahtar/değer depolama sistemini nasıl uygulayacağınızı öğrenin.

React Native'in AsyncStorage'ı, bir React Native uygulamasında veri depolamayı ve kalıcı hale getirmeyi basitleştirir. AsyncStorage API ile, cihazın yerel depolamasına veya karmaşık depolama sistemlerine ihtiyaç duymadan uygulamanızdaki basit küçük veri durumlarını işleyebilirsiniz.

React Native'in AsyncStorage'ı Nedir?

AsyncStorage API, kalıcı bir anahtar/değer depolama sistemidir. API bir dizi destekler JavaScript veri türleri, dize, boolean, sayı ve JSON nesneleri dahil.

AsyncStorage kullanılarak depolanan veriler devam eder ve uygulama kapansa veya cihaz yeniden başlatılsa bile kullanılabilir durumda kalır. Bu, AsyncStorage'ı verileri önbelleğe almak ve küçük miktarlarda uygulama durumu depolamak için ideal bir depolama çözümü yapar.

AsyncStorage Hangi Sorunu Çözüyor?

AsyncStorage ortaya çıkmadan önce, uygun verileri önbelleğe alma güvenilmez bir çabaydı. Verileri, uygulamanız kapandığında verileri sürdüremeyen yerel depolama alanında depolayabilir veya verileri bir İlişkisel Veritabanı Yönetim Sisteminde (RDBMS) depolayabilirsiniz. Ancak bu kullanım durumu için çalıştırılamayacak kadar karmaşıklar.

instagram viewer

AsyncStorage, React Native uygulamalarında küçük ve geçici verileri depolamak için basit ve güvenilir bir yol sağlayarak bu sorunları çözer.

Verileri AsyncStorage ile depolamak için, veriler önce bir JSON dizesi halinde seri hale getirilir. JSON dizesi daha sonra bir anahtar/değer sisteminde depolanır. AsyncStorage'dan veri almaya çalıştığınızda, veriler JSON'dan seri durumdan çıkarılır ve ardından orijinal biçiminde size geri gönderilir.

Bunlar eşzamansız programlar ana JavaScript iş parçacığını engellemeden çalışır. Kullanıcı ayarları ve uygulama durumu gibi sık erişim gerektiren verileri depolamak için idealdir.

AsyncStorage Yöntemleri

yüklemek için tepki-yerel zaman uyumsuz-depolama paketi, projenizin terminalinde aşağıdaki komutu çalıştırın:

npm install @react-native-async-storage/async-storage

AsyncStorage doğası gereği eşzamansız olduğundan, yöntemleri sonuçları hemen döndürmez. Bunun yerine, işlem tamamlandığında çözülen bir söz verirler.

kullanmalısın zaman uyumsuz/bekliyor AsyncStorage yöntemlerini çağırırken sözdizimi veya benzer bir teknik.

setItem() ve multiSet() Yöntemlerini Kullanarak Veri Yazma

bu setItem() Ve multiSet() Yöntemler, verilen anahtarın değerlerini ayarlamak için kullanılır. Bu yöntemler, anahtarı ve değerleri parametre olarak kabul eder.

Yöntem, işlemin başarılı olup olmadığını gösteren bir boole değeriyle çözümlenen veya işlem başarısız olursa bir hatayla reddeden bir söz döndürür:

// "user" anahtarı için bir değer kaydedin
beklemek AsyncStorage.setItem("kullanıcı", 'John');
// "user" anahtarı için birden fazla değer kaydedin
beklemek AsyncStorage.multiSet(["kullanıcı", 'John', 'doe']);

getItem() ve multiGet() Yöntemlerini Kullanarak Veri Okuma

İle getItem() yönteminde, almak istediğiniz değerin anahtarını kullanarak kayıtlı verileri depodan çekebilirsiniz. Geçirilen anahtar mevcut değilse, söz bir hatayla reddedilir:

sabit isim = beklemek AsyncStorage.getItem("kullanıcı");

tarafından döndürülen değer getItem() bir dizidir. Verileri başka bir biçimde saklamanız gerekirse, şunu kullanabilirsiniz: JSON.stringify() verileri saklamadan önce bir dizgeye dönüştürmek için. Sonra kullan JSON.parse() dizeyi alırken orijinal veri türüne geri dönüştürmek için.

Örneğin:

// "user" anahtarı için {name: "John Doe", age: 30} nesnesini kaydedin
beklemek AsyncStorage.setItem("kullanıcı", JSON.stringify({isim: "John Doe", yaş: 30}));
// "user" anahtarı için nesneyi alın
sabit kullanıcı = JSON.ayrıştırma(beklemek AsyncStorage.getItem("kullanıcı"));

Şunu da kullanabilirsiniz: multiGet() birden çok anahtar/değer çifti çekme yöntemi. Yöntem, dize olması gereken bir dizi anahtar alacaktır.

MergeItem() ve multiMerge() Yöntemlerini Kullanarak Verileri Birleştirme

bu birleştirmeItem() Ve çoklu Birleştirme() yöntemler, verilen değeri verilen anahtar için mevcut değerle birleştirir. geçirilen değer birleştirmeItem() herhangi bir veri türü olabilir. Ancak, AsyncStorage'ın verileri şifrelemediğini ve bu nedenle cihaza erişimi olan herkesin verileri okuyabileceğini unutmamak önemlidir:

beklemek AsyncStorage.mergeItem('isim', "Jane Doe");

birleştirmeItem() Birleştirmek istediğiniz değer için anahtarı ve anahtarın mevcut değeri ile birleştirmek istediğiniz yeni değeri alır. Kullanmak çoklu Birleştirme() birden fazla öğeyi bir anahtar değerde birleştirmek için.

clear() Yöntemini Kullanarak Depolamayı Temizleyin

bu temizlemek() yöntemi, AsyncStorage'da depolanan tüm öğeleri kaldırmanıza olanak tanır. Kullanıcı oturumunu kapatırken uygulamanın durumunu sıfırlamanız gerektiğinde veya cep telefonunuzdaki önbelleğe alınmış verileri temizleyin.

Örneğin:

sabit temizleVeriler = zaman uyumsuz () => {
denemek {
beklemek AsyncStorage.clear();

 } yakalamak (e) {
konsol.hata (e);
 }
};

Yukarıdaki kod, AsyncStorage'da depolanan tüm anahtar/değer çiftlerini siler.

Ek olarak, bir geri arama işlevi sağlayabilirsiniz. temizlemek(), işlem tamamlandığında çağrılacak olan:

AsyncStorage.clear()
 .Daha sonra(() => {
// Temizleme işlemi tamamlandı

 })
 .yakalamak((hata) => {
konsol.hata (hata);
 });

Not temizlemek() yöntemi, AsyncStorage'da depolanan tüm verileri kalıcı olarak siler.

AsyncStorage ile Verileri Önbelleğe Alma

Verileri önbelleğe almak, performansı artırmak ve ağ isteklerini azaltmak için mobil uygulama geliştirmede yaygın bir uygulamadır. AsyncStorage ile React Native uygulamalarında verileri kolayca önbelleğe alabilirsiniz.

Bir veri parçasına eriştiğinizde, önce önbellekte olup olmadığı kontrol edilir. Öyleyse, veriler önbellekten döndürülür. Değilse, program verileri daha kalıcı depolama konumundan alır ve önbellekte saklar. Verilere bir sonraki erişiminizde, bunun yerine önbellekten döndürülecektir.

Bir API'den getirilen kitapların listesini görüntüleyen bir uygulamanız olduğunu varsayalım. Performansı artırmak için getirilen kitap verilerini AsyncStorage kullanarak önbelleğe alabilirsiniz.

İşte bunun bir örnek uygulaması:

sabit [kitaplar, setBooks] = useState([]);
useEffect(() => {
sabit kitap getir = zaman uyumsuz () => {
denemek {
// Önbelleğe alınmış verilerin var olup olmadığını kontrol edin
sabit önbelleğe alınmış Veri = beklemek AsyncStorage.getItem("önbelleğe alınmış Kitaplar");


eğer (cachedData !== hükümsüz) {
// Önbelleğe alınmış veriler varsa, ayrıştırın ve başlangıç ​​durumu olarak ayarlayın
 setKitaplar(JSON.parse (cachedData));
 } başka {
// Önbelleğe alınan veriler mevcut değilse, API'den veri alın
sabit cevap = beklemek gidip getirmek(' https://api.example.com/books');
sabit veri = beklemek yanıt.json();


// Alınan verileri önbelleğe al
beklemek AsyncStorage.setItem("önbelleğe alınmış Kitaplar", JSON.stringify (veri));


// Alınan verileri başlangıç ​​durumu olarak ayarla
 setBooks (veri);
 }
 } yakalamak (hata) {
konsol.hata (hata);
 }
 };
 fetchBooks();
 }, []);

Bu örnekte, useEffect kitap verilerini getirmek için kanca. İçinde kitap getir işlevi, arayarak önbelleğe alınmış verilerin var olup olmadığını kontrol edin AsyncStorage.getItem('cachedBooks'). Önbelleğe alınmış veriler varsa, kullanarak ayrıştırın JSON.parse ve kullanarak ilk durum olarak ayarlayın kitap seti. Bu, önbelleğe alınan verileri hemen görüntülemenizi sağlar.

Önbelleğe alınan veriler mevcut değilse, fetch() yöntemini kullanarak verileri API'den getirin. Veriler döndürüldükten sonra, arayarak önbelleğe alın AsyncStorage.setItem(). Ardından, getirilen verileri başlangıç ​​durumu olarak ayarlayın ve daha fazla işlemenin alınan verileri görüntülemesini sağlayın.

Artık önbelleğe alınmış kitapları şu şekilde görüntüleyebilirsiniz:

içe aktarmak Tepki, { useEffect, useState } itibaren'tepki';
içe aktarmak { Görünüm, Metin, Düz Liste } itibaren"tepki-yerli";
içe aktarmak AsyncStorage itibaren"@react-native-async-storage/async-storage";
sabit uygulama = () => {
geri dönmek (

Kitap Listesi</Text>
 veri={kitaplar}
 keyExtractor={(item) => item.id.toString()}
 renderItem={({ öğe }) => (

{item.title}</Text>
{öğe.yazar}/Text>
 </View>
 )}
 />
 </View>
 );
};
ihracatvarsayılan Uygulama;

Daha fazla uygulama başlatma veya ekran yeniden yükleme işlemleri, önbelleğe alınan verileri gereksiz API isteklerinde bulunmadan görüntüler.

Dinamik Veri Yükleme için AsyncStorage Kullanma

React Native AsyncStorage, verileri depolamak ve almak için güçlü bir çözüm sunar. Önbelleğe alma özelliklerinden yararlanarak performansı artırır ve depolanan verilere daha hızlı erişim sağlar.

AsyncStorage bilginizi özel sayfalandırma gibi tekniklerle birleştirdiğinizde, verileri React Native uygulamanızda dinamik olarak yükleyebilir ve görüntüleyebilirsiniz. Bu, büyük veri kümelerinin verimli bir şekilde işlenmesini sağlayacaktır.