Dowiedz się, jak wdrożyć ten asynchroniczny i globalny system przechowywania klucz-wartość w swojej aplikacji React Native.

AsyncStorage React Native sprawia, że ​​przechowywanie i utrwalanie danych w aplikacji React Native jest proste. Dzięki interfejsowi API AsyncStorage możesz obsługiwać proste przypadki małych danych w swojej aplikacji bez potrzeby używania lokalnej pamięci urządzenia lub złożonych systemów pamięci masowej.

Co to jest AsyncStorage React Native?

Interfejs API AsyncStorage to trwały system przechowywania klucz-wartość. API obsługuje szereg Typy danych JavaScript, w tym łańcuchy, wartości logiczne, liczby i obiekty JSON.

Dane przechowywane za pomocą AsyncStorage są trwałe i pozostaną dostępne nawet po zamknięciu aplikacji lub ponownym uruchomieniu urządzenia. To sprawia, że ​​AsyncStorage jest idealnym rozwiązaniem pamięci masowej do buforowania danych i przechowywania niewielkich ilości stanu aplikacji.

Jaki problem rozwiązuje AsyncStorage?

Przed pojawieniem się AsyncStorage prawidłowe buforowanie danych było zawodnym wysiłkiem. Możesz albo przechowywać dane w pamięci lokalnej, która nie jest w stanie zachować danych po zamknięciu aplikacji, albo możesz przechowywać dane w systemie zarządzania relacyjną bazą danych (RDBMS). Ale są one zbyt skomplikowane, aby działać w tym przypadku użycia.

instagram viewer

AsyncStorage rozwiązuje te problemy, zapewniając prosty, niezawodny sposób przechowywania małych i tymczasowych danych w aplikacjach React Native.

Aby przechowywać dane za pomocą AsyncStorage, dane są najpierw serializowane do ciągu JSON. Ciąg JSON jest następnie przechowywany w systemie klucz-wartość. Podczas próby pobrania danych z AsyncStorage dane są deserializowane z formatu JSON, a następnie zwracane w oryginalnym formacie.

To są programy asynchroniczne które działają bez blokowania głównego wątku JavaScript. Dzięki temu idealnie nadaje się do przechowywania danych wymagających częstego dostępu, takich jak ustawienia użytkownika i stan aplikacji.

Metody AsyncStorage

Aby zainstalować reaguj natywnie asynchronicznie package, uruchom następujące polecenie w terminalu swojego projektu:

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

Ponieważ AsyncStorage ma charakter asynchroniczny, jego metody nie zwracają wyników natychmiast. Zamiast tego zwracają obietnicę, która zostaje rozwiązana po zakończeniu operacji.

Powinieneś użyć tzw asynchroniczne/oczekiwanie składnia lub podobna technika podczas wywoływania metod AsyncStorage.

Zapisywanie danych za pomocą metod setItem() i multiSet().

The ustaw element() I multiSet() metody służą do ustawiania wartości dla danego klucza. Te metody akceptują klucz i wartości jako parametry.

Metoda zwróciłaby obietnicę, która rozwiązuje się z wartością logiczną wskazującą, czy operacja się powiodła, czy odrzuca z błędem, jeśli operacja się nie powiodła:

// Zapisz wartość dla klucza „użytkownik”
czekać na AsyncStorage.setItem('użytkownik', 'Jan');
// Zapisz wiele wartości dla klucza „użytkownik”
czekać na AsyncStorage.multiSet(['użytkownik', 'Jan', 'łania']);

Odczytywanie danych za pomocą metod getItem() i multiGet().

z Zdobądź przedmiot() metodą możesz pobrać zapisane dane z magazynu za pomocą klucza dla wartości, którą chcesz uzyskać. Jeśli przekazany klucz nie istnieje, obietnica odrzuca z błędem:

konst imię = czekać na AsyncStorage.getItem('użytkownik');

Wartość zwrócona przez Zdobądź przedmiot() jest ciągiem. Jeśli potrzebujesz przechowywać dane w innym formacie, możesz użyć JSON.stringify() aby przekonwertować dane na łańcuch przed ich zapisaniem. Następnie użyj analiza JSON.parse() aby przekonwertować ciąg z powrotem na oryginalny typ danych podczas jego pobierania.

Na przykład:

// Zapisz obiekt {imię: „John Doe”, wiek: 30} dla klucza „user”
czekać na AsyncStorage.setItem('użytkownik', JSON.stringify({nazwa: "Nieznany z nazwiska", wiek: 30}));
// Pobierz obiekt dla klucza „user”
konst użytkownik = JSON.analizować(czekać na AsyncStorage.getItem('użytkownik'));

Możesz także skorzystać z tzw multiGet() metoda pobierania wielu par klucz-wartość. Metoda przyjmie tablicę kluczy, które muszą być ciągami znaków.

Scalanie danych za pomocą metod mergeItem() i multiMerge().

The scalanie elementu() I multiMerge() metody scalają podaną wartość z istniejącą wartością dla danego klucza. Wartość przekazana do scalanie elementu() mogą to być dowolne dane. Należy jednak pamiętać, że AsyncStorage nie szyfruje danych, więc każdy, kto ma dostęp do urządzenia, może je odczytać:

czekać na AsyncStorage.mergeItem('nazwa', „Jane Doe”);

scalanie elementu() pobiera klucz dla wartości, którą chcesz scalić, oraz nową wartość, którą chcesz scalić z istniejącą wartością klucza. Używać multiMerge(), aby połączyć więcej niż jeden element z wartością klucza.

Wyczyść pamięć przy użyciu metody clear().

The jasne() Metoda pozwala usunąć wszystkie elementy przechowywane w AsyncStorage. Może to być przydatne w różnych sytuacjach, na przykład gdy trzeba zresetować stan aplikacji podczas wylogowania użytkownika lub wyczyść dane z pamięci podręcznej w telefonie komórkowym.

Na przykład:

konst wyczyść dane = asynchroniczny () => {
próbować {
czekać na AsyncStorage.clear();

 } złapać (e) {
konsolabłąd (e);
 }
};

Powyższy kod usunie wszystkie pary klucz-wartość przechowywane w AsyncStorage.

Dodatkowo możesz udostępnić funkcję wywołania zwrotnego jasne(), który zostanie wywołany po zakończeniu operacji:

AsyncStorage.clear()
 .Następnie(() => {
// Operacja czyszczenia zakończona

 })
 .złapać((błąd) => {
konsola.błąd (błąd);
 });

Zauważ, że jasne() metoda trwale usunie wszystkie dane przechowywane w AsyncStorage.

Buforowanie danych za pomocą AsyncStorage

Buforowanie danych jest powszechną praktyką w tworzeniu aplikacji mobilnych w celu poprawy wydajności i zmniejszenia liczby żądań sieciowych. Dzięki AsyncStorage możesz łatwo buforować dane w aplikacjach React Native.

Gdy uzyskujesz dostęp do fragmentu danych, dane są najpierw sprawdzane, aby zobaczyć, czy znajdują się już w pamięci podręcznej. Jeśli tak, dane są zwracane z pamięci podręcznej. Jeśli tak nie jest, program pobiera dane z bardziej trwałego miejsca przechowywania i przechowuje je w pamięci podręcznej. Następnym razem, gdy uzyskasz dostęp do danych, zostaną one zwrócone z pamięci podręcznej.

Załóżmy, że masz aplikację wyświetlającą listę książek pobranych z interfejsu API. Aby zwiększyć wydajność, możesz buforować pobrane dane książki za pomocą AsyncStorage.

Oto przykładowa implementacja tego:

konst [książki, zestawKsiążek] = useState([]);
użyjEfekt(() => {
konst pobierz książki = asynchroniczny () => {
próbować {
// Sprawdź, czy buforowane dane istnieją
konst buforowane dane = czekać na AsyncStorage.getItem(„Książki w pamięci podręcznej”);


Jeśli (dane w pamięci podręcznej!== zero) {
// Jeśli buforowane dane istnieją, przeanalizuj je i ustaw jako stan początkowy
 zestawKsiążek(JSON.parse (cachedData));
 } w przeciwnym razie {
// Jeśli buforowane dane nie istnieją, pobierz dane z interfejsu API
konst odpowiedź = czekać na aportować(' https://api.example.com/books');
konst dane = czekać na odpowiedź.json();


// Buforowanie pobranych danych
czekać na AsyncStorage.setItem(„Książki w pamięci podręcznej”, JSON.stringify (dane));


// Ustaw pobrane dane jako stan początkowy
 zestawKsiążek (dane);
 }
 } złapać (błąd) {
konsola.błąd (błąd);
 }
 };
 pobierz książki();
 }, []);

W tym przykładzie używasz UżyjEfekt hook, aby pobrać dane książki. w ciągu Pobierz książki funkcji, sprawdź, czy dane w pamięci podręcznej istnieją, dzwoniąc AsyncStorage.getItem('booki w pamięci podręcznej'). Jeśli dane w pamięci podręcznej istnieją, przeanalizuj je za pomocą Analiza JSON i ustaw go jako stan początkowy za pomocą zestawKsiążki. Pozwala to na natychmiastowe wyświetlenie danych z pamięci podręcznej.

Jeśli dane w pamięci podręcznej nie istnieją, pobierz dane z API za pomocą metody fetch().. Po zwróceniu danych buforuj je, wywołując AsyncStorage.setItem(). Następnie ustaw pobrane dane jako stan początkowy, upewniając się, że kolejne rendery będą wyświetlać pobrane dane.

Możesz teraz wyświetlać książki z pamięci podręcznej w następujący sposób:

import Zareaguj, {useEffect, useState} z'reagować';
import { Widok, tekst, płaska lista } z„reaguj natywnie”;
import Przechowywanie asynchroniczne z„@react-native-async-storage/async-storage”;
konst Aplikacja = () => {
powrót (

Lista książek</Text>
 dane={książki}
 keyExtractor={(pozycja) => pozycja.id.toString()}
 renderItem={({ element }) => (

{pozycja.tytuł}</Text>
{item.autor}</Text>
 </View>
 )}
 />
 </View>
 );
};
eksportdomyślny Aplikacja;

Dalsze uruchamianie aplikacji lub ponowne ładowanie ekranu spowoduje wyświetlenie danych z pamięci podręcznej bez wykonywania zbędnych żądań API.

Używanie AsyncStorage do dynamicznego ładowania danych

React Native AsyncStorage oferuje potężne rozwiązanie do przechowywania i pobierania danych. Wykorzystując możliwości buforowania, zwiększa wydajność i zapewnia szybszy dostęp do przechowywanych danych.

Gdy połączysz wiedzę na temat AsyncStorage z technikami takimi jak niestandardowa paginacja, możesz dynamicznie ładować i wyświetlać dane w swojej aplikacji React Native. Umożliwi to wydajną obsługę dużych zbiorów danych.