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 l’AsyncStorage de React Native ?

L’API AsyncStorage est un système de stockage persistant de valeurs clés. L’API prend en charge une série de types de données JavaScript, notamment les chaînes de caractères, les booléens, les nombres et les objets JSON.

Les données stockées à l’aide d’AsyncStorage sont persistantes et restent 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 des données était un effort peu fiable. Vous pouviez soit stocker les données dans le stockage local, qui est incapable de persister lorsque votre application se ferme, soit stocker les données dans un système de gestion de base de données relationnelle (RDBMS). Mais ces systèmes sont trop complexes à utiliser pour ce cas d’utilisation.

AsyncStorage résout ces problèmes en fournissant un moyen simple et fiable de stocker des données temporaires et de petite taille 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 d’extraire des données d’AsyncStorage, les données sont désérialisées à partir de JSON et vous sont renvoyées dans leur format d’origine.

Il s’agit de programmes asynchrones qui s’exécutent sans bloquer le fil principal de JavaScript. Ils sont donc idéaux pour stocker des données auxquelles il faut accéder fréquemment, comme les paramètres de l’utilisateur et l’état de l’application.

Méthodes AsyncStorage

Pour installer la méthode react-native-async-storage exécutez la commande suivante dans le terminal de votre projet :

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

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

Il est conseillé d’utiliser la méthode async/await ou une technique similaire lors de l’appel de méthodes AsyncStorage.

Ecrire des données en utilisant les méthodes setItem() et multiSet()

Le setItem() et multiSet() 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 renvoie une promesse qui se résout en une valeur booléenne indiquant si l’opération a réussi ou qui est rejetée avec une erreur si l’opération a échoué :

 // Save a value for the key "user"
await AsyncStorage.setItem('user', 'john');

// Save multiple values for the key "user"
await AsyncStorage.multiSet(['user', 'john', 'doe']);

Lire des données en utilisant les méthodes getItem() et multiGet()

Avec la méthode getItem() vous pouvez extraire des données sauvegardées du stockage en utilisant la clé de la valeur que vous voulez obtenir. Si la clé passée n’existe pas, la promesse est rejetée avec une erreur :

 const name = await AsyncStorage.getItem('user');

La valeur retournée par getItem() est une chaîne de caractères. Si vous avez besoin de stocker des données dans un autre format, vous pouvez utiliser JSON.stringify() pour convertir les données en chaîne de caractères avant de les stocker. Utilisez ensuite JSON.parse() pour reconvertir la chaîne de caractères au type de données d’origine lors de sa récupération.

Par exemple :

 // Save the object {name: "John Doe", age: 30} for the key "user"
await AsyncStorage.setItem('user', JSON.stringify({name: "John Doe", age: 30}));

// Get the object for the key "user"
const user = JSON.parse(await AsyncStorage.getItem('user'));

Vous pouvez également utiliser l’option multiGet() pour extraire plusieurs paires clé-valeur. La méthode prend un tableau de clés qui doivent être des chaînes de caractères.

Fusionner des données en utilisant les méthodes mergeItem() et multiMerge()

La méthode mergeItem() et multiMerge() fusionne la valeur donnée avec la valeur existante pour la clé donnée. La valeur passée à mergeItem() peut être n’importe quel type de données. Cependant, il est important de noter qu’AsyncStorage ne crypte pas les données, de sorte que toute personne ayant accès à l’appareil peut lire les données :

 await AsyncStorage.mergeItem('name', 'Jane Doe');

mergeItem() prend la clé de la valeur que vous voulez fusionner et la nouvelle valeur que vous voulez fusionner avec la valeur existante de la clé. Utiliser multiMerge() pour fusionner plus d’un élément à une valeur clé.

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

La méthode clear() permet de supprimer tous les éléments stockés dans AsyncStorage. Elle peut être utile dans différents 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 mises en cache sur votre téléphone portable.

Par exemple :

 const clearData = async () => {
  try {
    await AsyncStorage.clear();
 
  } catch (e) {
    console.error(e);
  }
};

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

En outre, vous pouvez fournir une fonction de rappel à clear()qui sera invoquée une fois l’opération terminée :

 AsyncStorage.clear()
  .then(() => {
    // Clear operation completed
   
  })
  .catch((error) => {
    console.error(error);
  });

Notez que l’option clear() supprime 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 afin d’améliorer les performances et de 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 à une donnée, celle-ci est d’abord vérifiée pour voir si elle se trouve déjà dans le cache. Si c’est le cas, les données sont renvoyées depuis le cache. Dans le cas contraire, le programme extrait les données de l’emplacement de stockage plus permanent et les stocke dans la mémoire cache. La prochaine fois que vous accéderez aux données, elles seront renvoyées à partir de la mémoire cache.

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

Voici un exemple de mise en œuvre :

 const [books, setBooks] = useState([]);

useEffect(() => {
    const fetchBooks = async () => {
      try {
        // Check if the cached data exists
        const cachedData = await AsyncStorage.getItem('cachedBooks');

        if (cachedData !== null) {
          // If the cached data exists, parse and set it as the initial state
          setBooks(JSON.parse(cachedData));
        } else {
          // If the cached data doesn't exist, fetch data from the API
          const response = await fetch('https://api.example.com/books');
          const data = await response.json();

          // Cache the fetched data
          await AsyncStorage.setItem('cachedBooks', JSON.stringify(data));

          // Set the fetched data as the initial state
          setBooks(data);
        }
      } catch (error) {
        console.error(error);
      }
    };

    fetchBooks();
  }, []);

Dans cet exemple, vous utilisez la fonction useEffect pour récupérer les données du livre. Au sein de l’élément fetchBooks vérifie si les données mises en cache existent en appelant la fonction AsyncStorage.getItem(‘cachedBooks’). Si les données mises en cache existent, elles sont analysées à l’aide de la commande JSON.parse et le définir 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érez 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 la méthode AsyncStorage.setItem(). Définissez ensuite les données récupérées comme état initial, ce qui garantit que les rendus ultérieurs afficheront les données récupérées.

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

 import React, { useEffect, useState } from 'react';
import { View, Text, FlatList } from 'react-native';
import AsyncStorage from '@react-native-async-storage/async-storage';

const App = () => {
  return (
    <View>
      <Text>Book List</Text>
      <FlatList
        data={books}
        keyExtractor={(item) => item.id.toString()}
        renderItem={({ item }) => (
          <View>
            <Text>{item.title}</Text>
            <Text>{item.author}</Text>
          </View>
        )}
      />
    </View>
  );
};

export default App;

Les lancements ultérieurs de l’application ou les 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. En exploitant les capacités de mise en cache, il améliore les performances et fournit 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 de gérer efficacement les grands ensembles de données.