Što je AsyncStorage u React Nativeu i kako ga koristiti?

React Native AsyncStorage čini pohranjivanje i čuvanje podataka u aplikaciji React Native jednostavnim. Pomoću API-ja AsyncStorage možete obrađivati ​​jednostavne slučajeve malih podataka unutar svoje aplikacije bez potrebe za lokalnom pohranom uređaja ili složenim sustavima pohrane.

Što je React Native AsyncStorage?

AsyncStorage API trajni je sustav za pohranu ključ-vrijednosti. API podržava niz JavaScript tipovi podataka, uključujući nizove, booleove, brojeve i JSON objekte.

Podaci pohranjeni pomoću AsyncStoragea traju i ostat će dostupni čak i ako se aplikacija zatvori ili se uređaj ponovno pokrene. To čini AsyncStorage idealnim rješenjem za pohranu podataka za predmemoriju podataka i pohranjivanje malih količina stanja aplikacije.

Koji problem rješava AsyncStorage?

Prije pojave AsyncStoragea, ispravno spremanje podataka u predmemoriju bilo je nepouzdano. Možete pohraniti podatke u lokalnu pohranu, koja ne može zadržati podatke kada se vaša aplikacija zatvori, ili možete pohraniti podatke u sustav upravljanja relacijskom bazom podataka (RDBMS). Ali oni su previše složeni za rad za ovaj slučaj upotrebe.

AsyncStorage rješava ove probleme pružajući jednostavan, pouzdan način za pohranu malih i privremenih podataka u React Native aplikacijama.

Za pohranu podataka s AsyncStorageom, podaci se prvo serijaliziraju u JSON niz. JSON niz se zatim pohranjuje u sustav ključ-vrijednost. Kada pokušate dohvatiti podatke iz AsyncStoragea, podaci se deserializiraju iz JSON-a i zatim vam se vraćaju u izvornom formatu.

Ovi su asinkroni programi koji se pokreću bez blokiranja glavne JavaScript niti. Što ga čini idealnim za pohranu podataka kojima je potreban čest pristup, kao što su korisničke postavke i stanje aplikacije.

AsyncStorage metode

Za instaliranje react-native-async-storage paket, pokrenite sljedeću naredbu unutar terminala vašeg projekta:

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

Budući da je AsyncStorage asinkrone prirode, njegove metode neće odmah vratiti rezultate. Umjesto toga vraćaju obećanje koje se rješava kada se operacija završi.

Trebali biste koristiti asinkroni/čekaj sintaksa ili slična tehnika pri pozivanju AsyncStorage metoda.

Zapišite podatke pomoću metoda setItem() i multiSet().

The setItem() i multiSet() metode se koriste za postavljanje vrijednosti za dati ključ. Ove metode prihvaćaju ključ i vrijednosti kao parametre.

Metoda bi vratila obećanje koje se rješava s Boolean vrijednošću koja pokazuje je li operacija bila uspješna ili odbija s pogreškom ako operacija nije uspjela:

// Spremite vrijednost za ključ "user"
čekati AsyncStorage.setItem('korisnik', 'Ivan');
// Spremi više vrijednosti za ključ "user"
čekati AsyncStorage.multiSet(['korisnik', 'Ivan', 'srna']);

Čitanje podataka korištenjem metoda getItem() i multiGet().

s getitem() možete povući spremljene podatke iz pohrane pomoću ključa za vrijednost koju želite dobiti. Ako proslijeđeni ključ ne postoji, obećanje se odbija s pogreškom:

konst ime = čekati AsyncStorage.getItem('korisnik');

Vrijednost koju vraća getitem() je niz. Ako trebate pohraniti podatke u drugom formatu, možete koristiti JSON.stringify() za pretvaranje podataka u niz prije pohranjivanja. Zatim koristite JSON.parse() za pretvaranje niza natrag u izvorni tip podataka prilikom njegovog dohvaćanja.

Na primjer:

// Spremite objekt {name: "John Doe", age: 30} za ključ "user"
čekati AsyncStorage.setItem('korisnik', JSON.stringify({Ime: "John Doe", dob: 30}));
// Dobivanje objekta za ključ "user"
konst korisnik = JSON.parse(čekati AsyncStorage.getItem('korisnik'));

Također možete koristiti multiGet() metoda za izvlačenje više parova ključ-vrijednost. Metoda će uzeti niz ključeva koji moraju biti nizovi.

Spajanje podataka korištenjem metoda mergeItem() i multiMerge().

The spojiStavka() i multiMerge() metode spajaju danu vrijednost s postojećom vrijednošću za dani ključ. Vrijednost proslijeđena spojiStavka() mogu biti bilo koje vrste podataka. Međutim, važno je napomenuti da AsyncStorage ne kriptira podatke, tako da svatko s pristupom uređaju može čitati podatke:

čekati AsyncStorage.mergeItem('Ime', 'Jane Doe');

spojiStavka() uzima ključ za vrijednost koju želite spojiti i novu vrijednost koju želite spojiti s postojećom vrijednošću ključa. Koristiti multiMerge() za spajanje više od jedne stavke s ključnom vrijednošću.

Brisanje pohrane pomoću metode clear().

The čisto() omogućuje vam uklanjanje svih stavki pohranjenih u AsyncStorage. Može biti korisno u raznim scenarijima, primjerice kada trebate resetirati stanje aplikacije tijekom odjave korisnika ili očistite predmemorirane podatke na svom mobilnom telefonu.

Na primjer:

konst jasni podaci = asinkroni () => {
probati {
čekati AsyncStorage.clear();

 } ulov (e) {
konzola.greška (e);
 }
};

Gornji kôd će izbrisati sve parove ključ-vrijednost pohranjene u AsyncStorageu.

Osim toga, možete omogućiti funkciju povratnog poziva čisto(), koji će se pozvati nakon završetka operacije:

AsyncStorage.clear()
 .zatim(() => {
// Operacija brisanja dovršena

 })
 .ulov((greška) => {
konzola.greška (greška);
 });

Imajte na umu da je čisto() Metoda će trajno izbrisati sve podatke pohranjene u AsyncStorage.

Spremanje podataka u predmemoriju s AsyncStorageom

Spremanje podataka u predmemoriju uobičajena je praksa u razvoju mobilnih aplikacija radi poboljšanja performansi i smanjenja mrežnih zahtjeva. S AsyncStorageom možete jednostavno predmemorirati podatke u React Native aplikacijama.

Kada pristupite dijelu podatka, podaci se prvo provjeravaju da bi se vidjelo jesu li već u predmemoriji. Ako jest, tada se podaci vraćaju iz predmemorije. Ako nije, tada program dohvaća podatke s trajnijeg mjesta za pohranu i pohranjuje ih u predmemoriju. Sljedeći put kada pristupite podacima, oni će umjesto toga biti vraćeni iz predmemorije.

Pretpostavimo da imate aplikaciju koja prikazuje popis knjiga dohvaćenih iz API-ja. Kako biste poboljšali izvedbu, možete predmemorirati dohvaćene podatke knjige pomoću AsyncStoragea.

Evo primjera implementacije ovoga:

konst [knjige, setKnjige] = useState([]);
useEffect(() => {
konst dohvati knjige = asinkroni () => {
probati {
// Provjerite postoje li predmemorirani podaci
konst spremljeni podaci = čekati AsyncStorage.getItem('spremljene knjige');
ako (spremljeni podaci !== ništavan) {
// Ako predmemorirani podaci postoje, analizirajte ih i postavite kao početno stanje
 setKnjige(JSON.parse (cachedData));
 } drugo {
// Ako predmemorirani podaci ne postoje, dohvatite podatke iz API-ja
konst odgovor = čekati dohvati (' https://api.example.com/books');
konst podaci = čekati odgovor.json();
// Predmemorija dohvaćenih podataka
čekati AsyncStorage.setItem('spremljene knjige', JSON.stringify (podaci));
// Postavi dohvaćene podatke kao početno stanje
 setKnjige (podaci);
 }
 } ulov (pogreška) {
konzola.greška (greška);
 }
 };
 dohvatiKnjige();
 }, []);

U ovom primjeru koristite useEffect kuka za dohvaćanje podataka knjige. Unutar dohvatiKnjige provjerite postoje li predmemorirani podaci pozivom AsyncStorage.getItem('cachedBooks'). Ako predmemorirani podaci postoje, analizirajte ih pomoću JSON.parse i postavite ga kao početno stanje pomoću setKnjige. To vam omogućuje da odmah prikažete predmemorirane podatke.

Ako predmemorirani podaci ne postoje, dohvaćanje podataka iz API-ja pomoću metode fetch().. Nakon što se podaci vrate, predmemorirajte ih pozivom AsyncStorage.setItem(). Zatim postavite dohvaćene podatke kao početno stanje, osiguravajući da će daljnji renderi prikazati dohvaćene podatke.

Sada možete prikazati predmemorirane knjige ovako:

uvoz Reagiraj, {useEffect, useState} iz'reagirati';
uvoz { View, Text, FlatList } iz'react-native';
uvoz AsyncStorage iz'@react-native-async-storage/async-storage';
konst Aplikacija = () => {
povratak (

Popis knjiga</Text>
 podaci={knjige}
 keyExtractor={(stavka) => item.id.toString()}
 renderItem={({ stavka }) => (

{item.title}</Text>
{item.author}</Text>
 </View>
 )}
 />
 </View>
 );
};
izvozzadano aplikacija;

Daljnja pokretanja aplikacije ili ponovna učitavanja zaslona prikazat će predmemorirane podatke bez postavljanja nepotrebnih API zahtjeva.

Korištenje AsyncStorage za dinamičko učitavanje podataka

React Native AsyncStorage nudi moćno rješenje za pohranjivanje i dohvaćanje podataka. Koristeći mogućnosti predmemoriranja, poboljšava performanse i omogućuje brži pristup pohranjenim podacima.

Kada kombinirate znanje o AsyncStorageu s tehnikama kao što je prilagođeno označavanje stranica, možete dinamički učitati i prikazati podatke u svojoj aplikaciji React Native. To će omogućiti učinkovito rukovanje velikim skupovima podataka.