Qu'est-ce qu'AsyncStorage dans React Native et comment l'utiliser ?

AsyncStorage de React Native simplifie le stockage et la persistance des données dans une application React Native. Avec l'API AsyncStorage, vous pouvez gérer des cas simples de petites données dans votre application sans avoir besoin du stockage local de l'appareil ou de systèmes de stockage complexes.

Qu'est-ce que AsyncStorage de React Native?

L'API AsyncStorage est un système de stockage clé-valeur persistant. L'API prend en charge une gamme de Types de données JavaScript, y compris les objets chaîne, booléen, numérique et JSON.

Les données stockées à l'aide d'AsyncStorage persistent et resteront disponibles même si l'application se ferme ou si l'appareil redémarre. Cela fait d'AsyncStorage une solution de stockage idéale pour la mise en cache des données et le stockage de petites quantités d'état d'application.

Quel problème AsyncStorage résout-il?

Avant l'avènement d'AsyncStorage, la mise en cache appropriée des données était un effort peu fiable. Vous pouvez soit stocker les données dans un stockage local, qui ne peut pas conserver les données lorsque votre application se ferme, soit stocker les données dans un système de gestion de base de données relationnelle (RDBMS). Mais ils sont trop complexes à exploiter pour ce cas d'utilisation.

AsyncStorage résout ces problèmes en fournissant un moyen simple et fiable de stocker des données petites et temporaires dans les applications React Native.

Pour stocker des données avec AsyncStorage, les données sont d'abord sérialisées dans une chaîne JSON. La chaîne JSON est ensuite stockée dans un système clé-valeur. Lorsque vous tentez de récupérer des données à partir d'AsyncStorage, les données sont désérialisées à partir de JSON, puis vous sont renvoyées dans leur format d'origine.

Ceux-ci sont programmes asynchrones qui s'exécutent sans bloquer le thread JavaScript principal. Ce qui le rend idéal pour stocker des données nécessitant un accès fréquent, telles que les paramètres utilisateur et l'état de l'application.

Méthodes AsyncStorage

Pour installer le réagir-stockage-asynchrone-natif package, exécutez la commande suivante dans le terminal de votre projet :

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

Comme AsyncStorage est de nature asynchrone, ses méthodes ne renverront pas de résultats immédiatement. Au lieu de cela, ils renvoient une promesse qui se résout lorsque l'opération est terminée.

Vous devriez utiliser le asynchrone/attendre syntaxe ou une technique similaire lors de l'appel des méthodes AsyncStorage.

Écrire des données à l'aide des méthodes setItem() et multiSet()

Le setItem() et multiEnsemble() Les méthodes sont utilisées pour définir les valeurs de la clé donnée. Ces méthodes acceptent la clé et les valeurs comme paramètres.

La méthode renverrait une promesse qui se résout avec une valeur booléenne indiquant si l'opération a réussi ou la rejette avec une erreur si l'opération a échoué :

// Enregistre une valeur pour la clé "user"
attendre AsyncStorage.setItem('utilisateur', 'John');
// Enregistrer plusieurs valeurs pour la clé "user"
attendre AsyncStorage.multiSet(['utilisateur', 'John', 'biche']);

Lire des données à l'aide des méthodes getItem() et multiGet()

Avec le obtenir l'article() méthode, vous pouvez extraire les données enregistrées du stockage à l'aide de la clé de la valeur que vous souhaitez obtenir. Si la clé passée n'existe pas, la promesse est rejetée avec une erreur :

constante nom = attendre AsyncStorage.getItem('utilisateur');

La valeur renvoyée par obtenir l'article() est une chaîne. Si vous avez besoin de stocker des données dans un autre format, vous pouvez utiliser JSON.stringify() pour convertir les données en une chaîne avant de les stocker. Utilisez ensuite JSON.parse() pour reconvertir la chaîne dans le type de données d'origine lors de sa récupération.

Par exemple:

// Enregistre l'objet {name: "John Doe", age: 30} pour la clé "user"
attendre AsyncStorage.setItem('utilisateur', JSON.stringify({nom: "John Doe", âge: 30}));
// Récupère l'objet pour la clé "user"
constante utilisateur = JSON.parse(attendre AsyncStorage.getItem('utilisateur'));

Vous pouvez également utiliser le multiGet() méthode pour extraire plusieurs paires clé-valeur. La méthode prendra un tableau de clés qui doivent être des chaînes.

Fusionner des données à l'aide des méthodes mergeItem() et multiMerge()

Le mergeItem() et multiFusion() fusionnent la valeur donnée avec la valeur existante pour la clé donnée. La valeur transmise à mergeItem() peut être n'importe quel type de données. Cependant, il est important de noter qu'AsyncStorage ne crypte pas les données, donc toute personne ayant accès à l'appareil peut lire les données :

attendre AsyncStorage.mergeItem('nom', 'Jane Doe');

mergeItem() prend la clé de la valeur que vous souhaitez fusionner et la nouvelle valeur que vous souhaitez fusionner avec la valeur existante de la clé. Utiliser multiFusion() pour fusionner plusieurs éléments avec une valeur clé.

Effacer le stockage à l'aide de la méthode clear()

Le clair() La méthode vous permet de supprimer tous les éléments stockés dans AsyncStorage. Cela peut être utile dans divers scénarios, par exemple lorsque vous devez réinitialiser l'état de l'application lors de la déconnexion d'un utilisateur ou effacer les données en cache sur votre téléphone mobile.

Par exemple:

constante clearData = asynchrone () => {
essayer {
attendre AsyncStorage.clear();

 } attraper (e) {
console.erreur (e);
 }
};

Le code ci-dessus supprimera toutes les paires clé-valeur stockées dans AsyncStorage.

De plus, vous pouvez fournir une fonction de rappel pour clair(), qui sera invoqué une fois l'opération terminée :

AsyncStorage.clear()
 .alors(() => {
// Opération d'effacement terminée

 })
 .attraper((erreur) => {
console.error (erreur);
 });

Notez que le clair() supprimera définitivement toutes les données stockées dans AsyncStorage.

Mise en cache des données avec AsyncStorage

La mise en cache des données est une pratique courante dans le développement d'applications mobiles pour améliorer les performances et réduire les requêtes réseau. Avec AsyncStorage, vous pouvez facilement mettre en cache des données dans les applications React Native.

Lorsque vous accédez à un élément de données, les données sont d'abord vérifiées pour voir si elles sont déjà dans le cache. Si c'est le cas, les données sont renvoyées du cache. Si ce n'est pas le cas, le programme récupère les données à partir de l'emplacement de stockage le plus permanent et les stocke dans le cache. La prochaine fois que vous accéderez aux données, elles seront renvoyées du cache à la place.

Supposons que vous ayez une application qui affiche une liste de livres extraits d'une API. Pour améliorer les performances, vous pouvez mettre en cache les données de livre récupérées à l'aide d'AsyncStorage.

Voici un exemple d'implémentation de ceci :

constante [livres, setBooks] = useState([]);
useEffet(() => {
constante chercherLivres = asynchrone () => {
essayer {
// Vérifie si les données mises en cache existent
constante cachedData = attendre AsyncStorage.getItem('cachedBooks');
si (cachedData !== nul) {
// Si les données mises en cache existent, analysez-les et définissez-les comme état initial
 setBooks(JSON.parse (cachedData));
 } autre {
// Si les données mises en cache n'existent pas, récupère les données de l'API
constante réponse = attendre aller chercher(' https://api.example.com/books');
constante données = attendre réponse.json();
// Cache les données récupérées
attendre AsyncStorage.setItem('cachedBooks', JSON.stringify (données));
// Définit les données récupérées comme état initial
 setBooks (données);
 }
 } attraper (erreur) {
console.error (erreur);
 }
 };
 chercherLivres();
 }, []);

Dans cet exemple, vous utilisez le utiliserEffet crochet pour récupérer les données du livre. Au sein de la récupérer des livres fonction, vérifiez si les données mises en cache existent en appelant AsyncStorage.getItem('cachedBooks'). Si les données mises en cache existent, analysez-les à l'aide de JSON.parse et définissez-le comme état initial en utilisant setBooks. Cela vous permet d'afficher immédiatement les données mises en cache.

Si les données mises en cache n'existent pas, récupérer les données de l'API à l'aide de la méthode fetch(). Une fois les données renvoyées, mettez-les en cache en appelant AsyncStorage.setItem(). Définissez ensuite les données récupérées comme état initial, en vous assurant que les rendus ultérieurs afficheront les données récupérées.

Vous pouvez maintenant afficher les livres mis en cache comme ceci :

importer Réagir, { useEffect, useState } depuis'réagir';
importer { Affichage, Texte, FlatList } depuis'réagir natif';
importer Stockage asynchrone depuis'@react-native-async-storage/async-stockage';
constante Application = () => {
retour (

Liste de livres</Text>
 data={livres}
 keyExtractor={(item) => item.id.toString()}
 renderItem={({ élément }) => (

{item.title}</Text>
{item.author}</Text>
 </View>
 )}
 />
 </View>
 );
};
exporterdéfaut application ;

D'autres lancements d'applications ou rechargements d'écran afficheront les données mises en cache sans faire de demandes d'API inutiles.

Utilisation d'AsyncStorage pour le chargement dynamique des données

React Native AsyncStorage offre une solution puissante pour stocker et récupérer des données. Tirant parti des capacités de mise en cache, il améliore les performances et offre un accès plus rapide aux données stockées.

Lorsque vous combinez la connaissance d'AsyncStorage avec des techniques telles que la pagination personnalisée, vous pouvez charger et afficher dynamiquement des données dans votre application React Native. Cela permettra une gestion efficace des grands ensembles de données.