¿Qué es AsyncStorage en React Native y cómo usarlo?

AsyncStorage de React Native simplifica el almacenamiento y la persistencia de datos en una aplicación React Native. Con la API AsyncStorage, puede manejar casos simples de datos pequeños dentro de su aplicación sin necesidad del almacenamiento local del dispositivo o sistemas de almacenamiento complejos.

¿Qué es AsyncStorage de React Native?

La API AsyncStorage es un sistema persistente de almacenamiento de clave-valor. La API admite una gama de Tipos de datos de JavaScript, incluidos objetos de cadena, booleanos, numéricos y JSON.

Los datos almacenados mediante AsyncStorage persisten y permanecerán disponibles incluso si la aplicación se cierra o el dispositivo se reinicia. Esto convierte a AsyncStorage en una solución de almacenamiento ideal para almacenar datos en caché y almacenar pequeñas cantidades del estado de la aplicación.

¿Qué problema está resolviendo AsyncStorage?

Antes de la llegada de AsyncStorage, el almacenamiento en caché de datos adecuado era un esfuerzo poco confiable. Puede almacenar datos en el almacenamiento local, que no puede conservar los datos cuando se cierra su aplicación, o puede almacenar los datos en un Sistema de administración de bases de datos relacionales (RDBMS). Pero son demasiado complejos para operar en este caso de uso.

AsyncStorage resuelve estos problemas al proporcionar una forma simple y confiable de almacenar datos pequeños y temporales en aplicaciones React Native.

Para almacenar datos con AsyncStorage, los datos primero se serializan en una cadena JSON. Luego, la cadena JSON se almacena en un sistema de clave-valor. Cuando intenta recuperar datos de AsyncStorage, los datos se deserializan de JSON y luego se le devuelven en su formato original.

Estos son programas asíncronos que se ejecutan sin bloquear el hilo principal de JavaScript. Lo que lo hace ideal para almacenar datos que necesitan acceso frecuente, como la configuración del usuario y el estado de la aplicación.

Métodos de almacenamiento asíncrono

Para instalar el reaccionar-almacenamiento-asincrónico-nativo paquete, ejecute el siguiente comando dentro de la terminal de su proyecto:

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

Dado que AsyncStorage es de naturaleza asíncrona, sus métodos no devolverán resultados inmediatamente. En su lugar, devuelven una promesa que se resuelve cuando se completa la operación.

Deberías usar el asíncrono/espera sintaxis o una técnica similar al llamar a los métodos AsyncStorage.

Escribir datos utilizando los métodos setItem() y multiSet()

El establecer elemento () y multiConjunto() Los métodos se utilizan para establecer los valores para la clave dada. Estos métodos aceptan la clave y los valores como parámetros.

El método devolvería una promesa que se resuelve con un valor booleano que indica si la operación fue exitosa o se rechaza con un error si la operación falla:

// Guardar un valor para la clave "usuario"
esperar Almacenamiento asincrónico.setItem('usuario', 'John');
// Guardar múltiples valores para la clave "usuario"
esperar AsyncStorage.multiSet(['usuario', 'John', 'gama']);

Leer datos utilizando los métodos getItem() y multiGet()

Con el obtiene el objeto() método, puede extraer datos guardados del almacenamiento usando la clave para el valor que desea obtener. Si la clave pasada no existe, la promesa se rechaza con un error:

constante nombre = esperar AsyncStorage.getItem('usuario');

El valor devuelto por obtiene el objeto() es una cadena. Si necesita almacenar datos en otro formato, puede utilizar JSON.stringify() para convertir los datos en una cadena antes de almacenarlos. Entonces usa JSON.parse() para volver a convertir la cadena al tipo de datos original al recuperarla.

Por ejemplo:

// Guarda el objeto {nombre: "John Doe", edad: 30} para la clave "usuario"
esperar Almacenamiento asincrónico.setItem('usuario', JSON.stringificar({nombre: "Juan Doe", edad: 30}));
// Obtener el objeto para la clave "usuario"
constante usuario = JSON.analizar gramaticalmente(esperar AsyncStorage.getItem('usuario'));

También puede utilizar el multiObtener() método para extraer múltiples pares clave-valor. El método tomará una matriz de claves que deben ser cadenas.

Combinar datos usando los métodos mergeItem() y multiMerge()

El fusionar elemento () y multiCombinar() Los métodos fusionan el valor dado con el valor existente para la clave dada. El valor pasado a fusionar elemento () puede ser cualquier tipo de datos. Sin embargo, es importante tener en cuenta que AsyncStorage no cifra los datos, por lo que cualquier persona con acceso al dispositivo puede leer los datos:

esperar AsyncStorage.mergeItem('nombre', 'Fulano de tal');

fusionar elemento () toma la clave para el valor que desea fusionar y el nuevo valor que desea fusionar con el valor existente de la clave. Usar multiCombinar() para fusionar más de un elemento en un valor clave.

Borrar almacenamiento usando el método clear()

El claro() El método le permite eliminar todos los elementos almacenados en AsyncStorage. Puede ser útil en varios escenarios, como cuando necesita restablecer el estado de la aplicación durante el cierre de sesión de un usuario o borrar datos almacenados en caché en su teléfono móvil.

Por ejemplo:

constante borrar datos = asíncrono () => {
intentar {
esperar almacenamiento asincrónico.clear();

 } atrapar (e) {
consola.error (e);
 }
};

El código anterior eliminará todos los pares clave-valor almacenados en AsyncStorage.

Además, puede proporcionar una función de devolución de llamada para claro(), que se invocará una vez que se complete la operación:

Almacenamiento asincrónico.clear()
 .entonces(() => {
// Borrar operación completada

 })
 .atrapar((error) => {
consola.error (error);
 });

Tenga en cuenta que el claro() El método eliminará permanentemente todos los datos almacenados en AsyncStorage.

Almacenamiento en caché de datos con AsyncStorage

El almacenamiento en caché de datos es una práctica común en el desarrollo de aplicaciones móviles para mejorar el rendimiento y reducir las solicitudes de red. Con AsyncStorage, puede almacenar datos en caché fácilmente en las aplicaciones React Native.

Cuando accede a una parte de los datos, los datos primero se verifican para ver si ya están en el caché. Si es así, los datos se devuelven desde la memoria caché. Si no es así, el programa recupera los datos de la ubicación de almacenamiento más permanente y los almacena en el caché. La próxima vez que acceda a los datos, se devolverán desde la memoria caché.

Suponga que tiene una aplicación que muestra una lista de libros obtenidos de una API. Para mejorar el rendimiento, puede almacenar en caché los datos del libro obtenido mediante AsyncStorage.

Aquí hay un ejemplo de implementación de esto:

constante [libros, setBooks] = useState([]);
usarEfecto(() => {
constante buscarlibros = asíncrono () => {
intentar {
// Comprobar si existen los datos almacenados en caché
constante datos en caché = esperar AsyncStorage.getItem('cachedBooks');
si (datos en caché! == nulo) {
// Si los datos almacenados en caché existen, analícelos y configúrelos como el estado inicial
 conjunto de libros(JSON.parse (datos en caché));
 } demás {
// Si los datos almacenados en caché no existen, obtener datos de la API
constante respuesta = esperar buscar(' https://api.example.com/books');
constante datos = esperar respuesta.json();
// Almacenar en caché los datos obtenidos
esperar Almacenamiento asincrónico.setItem('cachedBooks', JSON.stringify (datos));
// Establecer los datos obtenidos como el estado inicial
 setBooks (datos);
 }
 } atrapar (error) {
consola.error (error);
 }
 };
 buscarLibros();
 }, []);

En este ejemplo, se utiliza el efecto de uso gancho para obtener los datos del libro. Dentro de buscar libros función, verifique si los datos almacenados en caché existen llamando AsyncStorage.getItem('cachedBooks'). Si los datos almacenados en caché existen, analícelos usando JSON.parse y configúrelo como el estado inicial usando conjunto de libros. Esto le permite mostrar los datos almacenados en caché inmediatamente.

Si los datos almacenados en caché no existen, obtener los datos de la API usando el método fetch(). Una vez que se devuelvan los datos, guárdelos en caché llamando Almacenamiento asincrónico.setItem(). Luego establezca los datos obtenidos como el estado inicial, asegurándose de que los renderizados posteriores muestren los datos obtenidos.

Ahora puede mostrar los libros almacenados en caché de esta manera:

importar Reaccionar, {usarEfecto, usarEstado} de'reaccionar';
importar { Ver, Texto, FlatList } de'reaccionar-nativo';
importar Almacenamiento asincrónico de'@react-native-async-storage/async-storage';
constante aplicación = () => {
devolver (

Lista de libros</Text>
 datos={libros}
 keyExtractor={(elemento) => elemento.id.toString()}
 renderItem={({ elemento }) => (

{elemento.título}</Text>
{elemento.autor}</Text>
 </View>
 )}
 />
 </View>
 );
};
exportarpor defecto aplicación;

Más lanzamientos de aplicaciones o recargas de pantalla mostrarán los datos almacenados en caché sin realizar solicitudes de API innecesarias.

Uso de AsyncStorage para la carga dinámica de datos

React Native AsyncStorage ofrece una solución poderosa para almacenar y recuperar datos. Aprovechando las capacidades de almacenamiento en caché, mejora el rendimiento y proporciona un acceso más rápido a los datos almacenados.

Cuando combina el conocimiento de AsyncStorage con técnicas como la paginación personalizada, puede cargar y mostrar datos dinámicamente en su aplicación React Native. Esto permitirá un manejo eficiente de grandes conjuntos de datos.