Guardar datos en bases de datos locales con AsyncStorage y React Native

 En este tutorial, aprenderemos cómo usar AsyncStorageReact Native para guardar datos en una base de datos.

Después de crear y diseñar nuestra lista de datos utilizando el FlastListcomponente, agregamos dos botones para abrir URL con navegadores web y guardar los metadatos del artículo localmente para leerlos más tarde. Veamos cómo implementar la funcionalidad del botón Leer más tarde usando el AsyncStoragemódulo en React Native.

AsyncStorage es un sistema de almacenamiento de valor clave asíncrono, no cifrado, persistente para React Native que debe usarse en lugar de LocalStorage porque hace uso de mecanismos eficientes de almacenamiento de datos como archivos y sistemas de bases de datos (SQLite).

En iOS, AsyncStoragealmacena valores pequeños en un diccionario serializado y valores más grandes en archivos separados. En Android, AsyncStorageutiliza SQLite o RocksDB .

Dirígete a tu terminal, asegúrate de estar dentro de tu proyecto React Native y ejecuta el siguiente comando:

$ npm install @react-native-community/async-storage --save

Debe ejecutar el run-android(o run-ios) nuevamente, después de instalar async-storage:

$ react-native run-android

A continuación, abra el App.jsarchivo e importe de la AsyncStoragesiguiente manera:

import AsyncStorage from '@react-native-community/async-storage';

A continuación, agregue el siguiente método:

const saveArticle = async (key, value) =>{
  try {
    await AsyncStorage.setItem(key, value);
  } catch (e) {
    console.log(e);
  }
};

En este punto, antes de implementar la interfaz de usuario para mostrar los marcadores, podemos asegurarnos de que los valores estén almacenados correctamente en nuestra base de datos local utilizando el siguiente método:

const getAllData = () =>{
  AsyncStorage.getAllKeys().then((keys) => {
    return AsyncStorage.multiGet(keys)
      .then((result) => {
        console.log(result);
      }).catch((e) =>{
        console.log(e);
      });
  });
}

Simplemente necesita llamarlo desde el saveArticle()método de la siguiente manera:

const saveArticle = async (key, value) =>{
  try {
    await AsyncStorage.setItem(key, value);
    getAllData();
  } catch (e) {
    console.log(e);
  }
};

También necesita ejecutar el comando react-native log-androido react-native log-iospara ver el resultado del console.log()método en su terminal.

A continuación, ahora todo lo que necesita hacer es llamar al saveArticle()método cuando presione el botón Leer más tarde . En su ArticleItemcomponente, cambie la onPresspropiedad del segundo IconButtoncomponente de la siguiente manera:

const ArticleItem = ({article}) => {
  const { title, description, url, urlToImage } = article;
  return (
    <View style = { styles.articleContainer }>
      <Image style={ styles.articleImage } source={{ uri: urlToImage }} />
      <Text style= { styles.articleTitle }>
        { title }
      </Text>
      <Text style = { styles.articleDescription }>
        { description }
      </Text>
      <View style = { styles.articleBtns}>
      <IconButton width= "50%" color = "white" bgcolor = "#ff5c5c" icon = { readIcon } onPress = { () => { console.log("Button pressed!")} } title = "Open" />
      <IconButton width= "50%" color = "white" bgcolor = "#ff5c5c" icon = { bookmarkIcon } onPress = { () => { saveArticle(title, url); } } title = "Read later" />
      </View>
    </View>
  )
}

Cuando se presiona el botón leer más tarde, llamamos al saveArticle()método con el título como clave y la URL como valor.

Veremos en la siguiente parte cómo crear un componente para mostrar los artículos marcados usando los métodos AsyncStorage.getAllKeys()y AsyncStorage.multiGet().