Che cos'è AsyncStorage in React Native e come si usa?

AsyncStorage di React Native semplifica l'archiviazione e la persistenza dei dati in un'app React Native. Con l'API AsyncStorage, puoi gestire casi semplici di dati di piccole dimensioni all'interno della tua app senza la necessità dell'archiviazione locale del dispositivo o di complessi sistemi di archiviazione.

Cos'è AsyncStorage di React Native?

L'API AsyncStorage è un sistema di archiviazione di valori-chiave persistente. L'API supporta una gamma di Tipi di dati JavaScript, inclusi gli oggetti stringa, booleano, numero e JSON.

I dati archiviati utilizzando AsyncStorage persistono e rimarranno disponibili anche se l'app si chiude o il dispositivo si riavvia. Ciò rende AsyncStorage una soluzione di archiviazione ideale per la memorizzazione nella cache dei dati e l'archiviazione di piccole quantità di stato dell'applicazione.

Quale problema sta risolvendo AsyncStorage?

Prima dell'avvento di AsyncStorage, la corretta memorizzazione nella cache dei dati era uno sforzo inaffidabile. Puoi archiviare i dati nella memoria locale, che non è in grado di mantenere i dati quando l'app si chiude, oppure puoi archiviare i dati in un sistema di gestione dei database relazionali (RDBMS). Ma sono troppo complessi per funzionare per questo caso d'uso.

AsyncStorage risolve questi problemi fornendo un modo semplice e affidabile per archiviare dati piccoli e temporanei nelle applicazioni React Native.

Per archiviare i dati con AsyncStorage, i dati vengono prima serializzati in una stringa JSON. La stringa JSON viene quindi archiviata in un sistema chiave-valore. Quando tenti di recuperare i dati da AsyncStorage, i dati vengono deserializzati da JSON e quindi restituiti nel formato originale.

Questi sono programmi asincroni che vengono eseguiti senza bloccare il thread JavaScript principale. Ideale per l'archiviazione di dati che richiedono un accesso frequente, come le impostazioni dell'utente e lo stato dell'applicazione.

Metodi AsyncStorage

Per installare il storage-nativo-asincrono-react pacchetto, esegui il seguente comando all'interno del terminale del tuo progetto:

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

Poiché AsyncStorage è di natura asincrona, i suoi metodi non restituiranno risultati immediatamente. Invece, restituiscono una promessa che si risolve quando l'operazione è completa.

Dovresti usare il asincrono/in attesa sintassi o una tecnica simile quando si chiamano i metodi AsyncStorage.

Scrivere dati utilizzando i metodi setItem() e multiSet()

IL setItem() E multiInsieme() I metodi vengono utilizzati per impostare i valori per la chiave data. Questi metodi accettano la chiave ei valori come parametri.

Il metodo restituirebbe una promessa che si risolve con un valore booleano che indica se l'operazione ha avuto successo o rifiuta con un errore se l'operazione fallisce:

// Salva un valore per la chiave "utente"
attendere AsyncStorage.setItem('utente', 'John');
// Salva più valori per la chiave "utente"
attendere AsyncStorage.multiSet(['utente', 'John', 'cerva']);

Leggere i dati utilizzando i metodi getItem() e multiGet()

Con il getItem() metodo, è possibile estrarre i dati salvati dall'archivio utilizzando la chiave per il valore che si desidera ottenere. Se la chiave passata non esiste, la promessa viene rifiutata con un errore:

cost nome = attendere AsyncStorage.getItem('utente');

Il valore restituito da getItem() è una stringa. Se è necessario archiviare i dati in un altro formato, è possibile utilizzare JSON.stringify() per convertire i dati in una stringa prima di memorizzarli. Quindi usa JSON.analisi() per riconvertire la stringa nel tipo di dati originale durante il recupero.

Per esempio:

// Salva l'oggetto {nome: "John Doe", età: 30} per la chiave "utente"
attendere AsyncStorage.setItem('utente', JSON.stringa({nome: "Giovanni Rossi", età: 30}));
// Ottieni l'oggetto per la chiave "utente"
cost utente = JSON.analizzare(attendere AsyncStorage.getItem('utente'));

Puoi anche usare il multiGet() metodo per estrarre più coppie chiave-valore. Il metodo prenderà un array di chiavi che devono essere stringhe.

Unire i dati utilizzando i metodi mergeItem() e multiMerge()

IL unisciArticolo() E multiUnione() i metodi uniscono il valore dato con il valore esistente per la chiave data. Il valore passato a unisciArticolo() può essere qualsiasi tipo di dati. Tuttavia, è importante notare che AsyncStorage non crittografa i dati, quindi chiunque abbia accesso al dispositivo può leggere i dati:

attendere AsyncStorage.mergeItem('nome', 'Jane Doe');

unisciArticolo() prende la chiave per il valore che vuoi unire e il nuovo valore che vuoi unire con il valore esistente della chiave. Utilizzo multiUnione() per unire più di un elemento a un valore chiave.

Cancella memoria utilizzando il metodo clear()

IL chiaro() Il metodo consente di rimuovere tutti gli elementi archiviati in AsyncStorage. Può essere utile in vari scenari, ad esempio quando è necessario reimpostare lo stato dell'app durante il logout di un utente o cancella i dati memorizzati nella cache sul tuo cellulare.

Per esempio:

cost clearData = asincrono () => {
Tentativo {
attendere AsyncStorage.clear();

 } presa (e) {
consolare.errore (e);
 }
};

Il codice sopra eliminerà tutte le coppie chiave-valore archiviate in AsyncStorage.

Inoltre, puoi fornire una funzione di callback a chiaro(), che verrà richiamato una volta completata l'operazione:

AsyncStorage.clear()
 .Poi(() => {
// Operazione di cancellazione completata

 })
 .presa((errore) => {
consolare.errore (errore);
 });

Si noti che il chiaro() Il metodo eliminerà definitivamente tutti i dati archiviati in AsyncStorage.

Memorizzazione nella cache dei dati con AsyncStorage

La memorizzazione nella cache dei dati è una pratica comune nello sviluppo di app per dispositivi mobili per migliorare le prestazioni e ridurre le richieste di rete. Con AsyncStorage, puoi facilmente memorizzare nella cache i dati nelle app React Native.

Quando accedi a una parte di dati, i dati vengono prima controllati per vedere se sono già nella cache. Se lo è, i dati vengono restituiti dalla cache. In caso contrario, il programma recupera i dati dalla posizione di archiviazione più permanente e li memorizza nella cache. La prossima volta che accedi ai dati, verranno invece restituiti dalla cache.

Si supponga di disporre di un'app che visualizza un elenco di libri recuperati da un'API. Per migliorare le prestazioni, puoi memorizzare nella cache i dati del libro recuperato utilizzando AsyncStorage.

Ecco un esempio di implementazione di questo:

cost [libri, setLibri] = useState([]);
usaEffetto(() => {
cost fetchLibri = asincrono () => {
Tentativo {
// Controlla se i dati memorizzati nella cache esistono
cost dati memorizzati nella cache = attendere AsyncStorage.getItem('Libri memorizzati nella cache');
Se (Dati memorizzati nella cache!== nullo) {
// Se i dati memorizzati nella cache esistono, analizzali e impostali come stato iniziale
 setLibri(JSON.parse (cachedData));
 } altro {
// Se i dati memorizzati nella cache non esistono, recupera i dati dall'API
cost risposta = attendere andare a prendere(' https://api.example.com/books');
cost dati = attendere risposta.json();
// Memorizza nella cache i dati recuperati
attendere AsyncStorage.setItem('Libri memorizzati nella cache', JSON.stringify (dati));
// Imposta i dati recuperati come stato iniziale
 setBooks (dati);
 }
 } presa (errore) {
consolare.errore (errore);
 }
 };
 fetchLibri();
 }, []);

In questo esempio, si utilizza il useEffect hook per recuperare i dati del libro. All'interno del fetchLibri funzione, controlla se i dati memorizzati nella cache esistono chiamando AsyncStorage.getItem('cachedBooks'). Se i dati memorizzati nella cache esistono, analizzali utilizzando JSON.parse e impostalo come stato iniziale usando setBooks. Ciò consente di visualizzare immediatamente i dati memorizzati nella cache.

Se i dati memorizzati nella cache non esistono, recuperare i dati dall'API utilizzando il metodo fetch(). Una volta che i dati vengono restituiti, memorizzali nella cache chiamando AsyncStorage.setItem(). Quindi impostare i dati recuperati come stato iniziale, assicurandosi che ulteriori rendering visualizzeranno i dati recuperati.

Ora puoi visualizzare i libri memorizzati nella cache in questo modo:

importare Reagisci, {useEffect, useState} da'reagire';
importare {Visualizza, Testo, FlatList} da'nativo di reazione';
importare AsyncStorage da'@react-native-async-storage/async-storage';
cost Applicazione = () => {
ritorno (

Elenco libri</Text>
 data={libri}
 keyExtractor={(item) => item.id.toString()}
 renderItem={({ elemento }) => (

{articolo.titolo}</Text>
{item.author}</Text>
 </View>
 )}
 />
 </View>
 );
};
esportarepredefinito Applicazione;

Ulteriori lanci di app o ricariche dello schermo visualizzeranno i dati memorizzati nella cache senza effettuare richieste API non necessarie.

Utilizzo di AsyncStorage per il caricamento dinamico dei dati

React Native AsyncStorage offre una potente soluzione per l'archiviazione e il recupero dei dati. Sfruttando le funzionalità di memorizzazione nella cache, migliora le prestazioni e fornisce un accesso più rapido ai dati archiviati.

Quando combini la conoscenza di AsyncStorage con tecniche come l'impaginazione personalizzata, puoi caricare e visualizzare dinamicamente i dati nella tua app React Native. Ciò consentirà una gestione efficiente di set di dati di grandi dimensioni.