Co je AsyncStorage v React Native a jak jej používat?

AsyncStorage React Native usnadňuje ukládání a uchovávání dat v aplikaci React Native. S rozhraním AsyncStorage API můžete zpracovávat jednoduché případy malých dat ve vaší aplikaci, aniž byste potřebovali místní úložiště zařízení nebo složité úložné systémy.

Co je to AsyncStorage React Native?

AsyncStorage API je trvalý úložný systém klíč–hodnota. API podporuje řadu Datové typy JavaScriptu, včetně objektů typu string, boolean, number a JSON.

Data uložená pomocí AsyncStorage přetrvávají a zůstanou dostupná, i když se aplikace zavře nebo se zařízení restartuje. Díky tomu je AsyncStorage ideálním řešením úložiště pro ukládání dat do mezipaměti a ukládání malého množství stavu aplikace.

Jaký problém řeší AsyncStorage?

Před příchodem AsyncStorage bylo správné ukládání dat do mezipaměti nespolehlivé úsilí. Můžete buď uložit data v místním úložišti, které nemůže uchovat data, když se vaše aplikace zavře, nebo můžete data uložit do systému správy relačních databází (RDBMS). Ale jsou příliš složité na to, aby fungovaly pro tento případ použití.

AsyncStorage řeší tyto problémy tím, že poskytuje jednoduchý a spolehlivý způsob ukládání malých a dočasných dat v aplikacích React Native.

Chcete-li data uložit pomocí AsyncStorage, jsou data nejprve serializována do řetězce JSON. Řetězec JSON je pak uložen v systému klíč–hodnota. Když se pokusíte načíst data z AsyncStorage, data se deserializují z JSON a poté se vám vrátí ve svém původním formátu.

Tyto jsou asynchronní programy které běží bez blokování hlavního vlákna JavaScriptu. Díky tomu je ideální pro ukládání dat, která vyžadují častý přístup, jako jsou uživatelská nastavení a stav aplikací.

Metody asynchronního úložiště

Chcete-li nainstalovat reaktivní-nativní-asynchronní-úložiště balíček, spusťte v terminálu svého projektu následující příkaz:

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

Vzhledem k tomu, že AsyncStorage je asynchronní povahy, jeho metody nevrátí výsledky okamžitě. Místo toho vrátí slib, který se vyřeší po dokončení operace.

Měli byste použít asynchronní/čekání syntaxi nebo podobnou technikou při volání metod AsyncStorage.

Zápis dat pomocí metod setItem() a multiSet().

The setItem() a multiSet() k nastavení hodnot pro daný klíč se používají metody. Tyto metody přijímají klíč a hodnoty jako parametry.

Metoda by vrátila příslib, který se vyřeší pomocí booleovské hodnoty označující, zda byla operace úspěšná, nebo odmítne s chybou, pokud se operace nezdařila:

// Uložení hodnoty pro klíč "user"
čekat AsyncStorage.setItem('uživatel', 'John');
// Uložit více hodnot pro klíč "user"
čekat AsyncStorage.multiSet(['uživatel', 'John', 'srna']);

Čtení dat pomocí metod getItem() a multiGet().

s getItem() metodou, můžete vytáhnout uložená data z úložiště pomocí klíče pro hodnotu, kterou chcete získat. Pokud předaný klíč neexistuje, příslib se odmítne s chybou:

konst jméno = čekat AsyncStorage.getItem('uživatel');

Hodnota vrácená uživatelem getItem() je řetězec. Pokud potřebujete ukládat data v jiném formátu, můžete použít JSON.stringify() pro převod dat na řetězec před jejich uložením. Poté použijte JSON.parse() pro převod řetězce zpět na původní datový typ při jeho načítání.

Například:

// Uložte objekt {jméno: "John Doe", věk: 30} pro klíč "user"
čekat AsyncStorage.setItem('uživatel', JSON.stringify({název: "John Doe", stáří: 30}));
// Získejte objekt pro klíč "user"
konst uživatel = JSON.parse(čekat AsyncStorage.getItem('uživatel'));

Můžete také použít multiGet() metoda vytažení více párů klíč–hodnota. Metoda bude mít pole klíčů, které musí být řetězce.

Sloučení dat Pomocí metod mergeItem() a multiMerge().

The mergeItem() a multiMerge() metody sloučí danou hodnotu s existující hodnotou pro daný klíč. Hodnota předaná do mergeItem() může být libovolný typ dat. Je však důležité poznamenat, že AsyncStorage data nešifruje, takže data může číst kdokoli s přístupem k zařízení:

čekat AsyncStorage.mergeItem('název', 'Jane Doe');

mergeItem() vezme klíč pro hodnotu, kterou chcete sloučit, a novou hodnotu, kterou chcete sloučit s existující hodnotou klíče. Použití multiMerge() sloučit více než jednu položku do klíčové hodnoty.

Vymazat úložiště Pomocí metody clear()

The Průhledná() umožňuje odstranit všechny položky uložené v AsyncStorage. Může být užitečný v různých situacích, například když potřebujete resetovat stav aplikace během odhlašování uživatele nebo vymažte data uložená v mezipaměti v mobilním telefonu.

Například:

konst clearData = asynchronní () => {
Snaž se {
čekat AsyncStorage.clear();

 } chytit (e) {
řídicí panel.chyba (e);
 }
};

Výše uvedený kód odstraní všechny páry klíč–hodnota uložené v AsyncStorage.

Navíc můžete poskytnout funkci zpětného volání Průhledná(), který bude vyvolán po dokončení operace:

AsyncStorage.clear()
 .pak(() => {
// Vymazání dokončeno

 })
 .chytit((chyba) => {
řídicí panel.chyba (chyba);
 });

Všimněte si, že Průhledná() metoda trvale odstraní všechna data uložená v AsyncStorage.

Ukládání dat do mezipaměti pomocí AsyncStorage

Ukládání dat do mezipaměti je běžnou praxí při vývoji mobilních aplikací za účelem zlepšení výkonu a snížení požadavků na síť. S AsyncStorage můžete snadno ukládat data do mezipaměti v aplikacích React Native.

Když přistupujete k části dat, data se nejprve zkontrolují, zda již nejsou v mezipaměti. Pokud ano, jsou data vrácena z mezipaměti. Pokud tomu tak není, program načte data z trvalejšího úložiště a uloží je do mezipaměti. Při příštím přístupu k datům budou místo toho vrácena z mezipaměti.

Předpokládejme, že máte aplikaci, která zobrazuje seznam knih načtených z rozhraní API. Chcete-li zvýšit výkon, můžete načtená data knihy uložit do mezipaměti pomocí AsyncStorage.

Zde je příklad implementace tohoto:

konst [books, setBooks] = useState([]);
useEffect(() => {
konst fetchBooks = asynchronní () => {
Snaž se {
// Zkontrolujte, zda existují data uložená v mezipaměti
konst cachedData = čekat AsyncStorage.getItem('cachedBooks');
-li (data v mezipaměti !== nula) {
// Pokud data uložená v mezipaměti existují, analyzujte je a nastavte je jako počáteční stav
 setBooky(JSON.parse (cachedData));
 } jiný {
// Pokud data uložená v mezipaměti neexistují, načte data z rozhraní API
konst odpověď = čekat vynést(' https://api.example.com/books');
konst údaje = čekat response.json();
// Uložte načtená data do mezipaměti
čekat AsyncStorage.setItem('cachedBooks', JSON.stringify (data));
// Nastaví načtená data jako počáteční stav
 setBooky (data);
 }
 } chytit (chyba) {
řídicí panel.chyba (chyba);
 }
 };
 fetchBooks();
 }, []);

V tomto příkladu použijete useEffect háček pro načtení dat knihy. V rámci fetchBooks pomocí funkce zkontrolujte, zda data uložená v mezipaměti existují AsyncStorage.getItem('cachedBooks'). Pokud data uložená v mezipaměti existují, analyzujte je pomocí JSON.parse a nastavte jej jako výchozí stav pomocí setBooky. To vám umožní okamžitě zobrazit data uložená v mezipaměti.

Pokud data uložená v mezipaměti neexistují, načte data z API pomocí metody fetch().. Jakmile jsou data vrácena, uložte je do mezipaměti voláním AsyncStorage.setItem(). Poté nastavte načtená data jako počáteční stav a ujistěte se, že další vykreslování zobrazí načtená data.

Nyní můžete zobrazit knihy uložené v mezipaměti takto:

import Reagovat, { useEffect, useState } z'reagovat';
import { View, Text, FlatList } z'react-native';
import AsyncStorage z'@react-native-async-storage/async-storage';
konst Aplikace = () => {
vrátit se (

Seznam knih</Text>
 data={books}
 keyExtractor={(item) => item.id.toString()}
 renderItem={({ item }) => (

{item.title}</Text>
{item.author}</Text>
 </View>
 )}
 />
 </View>
 );
};
vývoznívýchozí Aplikace;

Další spouštění aplikací nebo opětovné načítání obrazovky zobrazí data uložená v mezipaměti bez zbytečných požadavků API.

Použití AsyncStorage pro dynamické načítání dat

React Native AsyncStorage nabízí výkonné řešení pro ukládání a načítání dat. Využitím možností ukládání do mezipaměti zvyšuje výkon a poskytuje rychlejší přístup k uloženým datům.

Když zkombinujete znalosti o AsyncStorage s technikami, jako je vlastní stránkování, můžete dynamicky načítat a zobrazovat data v aplikaci React Native. To umožní efektivní zpracování velkých datových sad.