Almacenando un Pokémon favorito con AsyncStorage

Clase 9 de 21 • Curso de React Native: Formularios, Almacenamiento y Deploy

Javier Prieto

student•

Una ayudita nunca viene mal:

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

Jose Manuel Hernandez De la Cruz

student•

yarn add @react-native-async-storage/async-storage

Horus Sinhue Camacho Avila

student•

Me tuve que regresar un par de clases, no se si el problema que encuentro lo resuelve más adelante, pero en la función para retornar lo que hay en favoritos en la funcion hace el JSON.parse(response || []) lo cual esta mal y va a tirar errores si no hay nada en favoritos, si agregas algo entonces si lo eliminas nuevamente mandaran algo vacío pero muy mal que haya hecho el return directo ahora mismo tengo otro error por el cual me tuve que regresar para tratar de resolverlo pero llevo tres cursos con este maestro y de verdad creo que Platzi debería revisar los contenidos que sube antes de publicarlos, utilizar versiones deprecadas y en las mismas pantallas muestra que la recomendación es no utilizarlas. Puedo entender que los cursos sean de años atrás pero si en el mismo video dice que hay cosas ya solucionadas en la versión correcta de las librerías por que no leer y entender que no debe usarlas?

Roberth Lopez

student•

Me pasa

Luis Gabriel

student•

yo tambien tuve ese error, hice que me retornara un arreglo vacio en caso de error

Luis Enrique Colmenares Rodriguez

student•

@react-native-async-storage/async-storage

Hector Manuel Martinez Moreira

student•

pueden importar con este comando igual

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

y luego pueden hacer el siguiente importe

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

David Rangel

student•

Les comparto mi repo para esta clase: https://github.com/dr1602/poke-native/pull/28/files

Agregué: 1. hook para llamar favoritos 2. hook para eliminar o agregar favoritos 3. condicional para modificar el ícono de corazón si agrega o elimina favoritos 4. libraría de react if para gestionar ícono.

gracias profe, es genial.

David Rangel

student•

Team, por si se preguntaban dónde almacena la información async-storage y si esta información persiste, aquí la respuesta:

Esa función almacena la data en el almacenamiento local del dispositivo (el celular), específicamente en un espacio reservado para tu aplicación.

AsyncStorage es un sistema de almacenamiento de clave-valor asíncrono y no encriptado que viene incluido en React Native. Piensa en él como una pequeña base de datos local para tu app.

Persistencia: La información persiste. Se guarda en el teléfono y permanece ahí incluso si el usuario cierra la aplicación o reinicia el celular. La única manera de que se borre es si el usuario desinstala la app, borra sus datos manualmente, o si tú borras la información con código.
El código: Tus funciones addPokemonFavoriteApi y getPokemonsFavoriteApi usan una clave llamada FAVORITE_STORAGE para guardar y recuperar la información. Es muy importante que sepas que AsyncStorage solo almacena datos como strings, por eso tu función usa JSON.stringify para convertir la lista de Pokémons a un texto antes de guardarla. Cuando recuperes la información, tendrás que convertirla de nuevo a un objeto de JavaScript con JSON.parse.

Nery Alberto Cano Ortigoza

student•

le dio a 2x el profe a esta clase 😅

Nery Alberto Cano Ortigoza

student•

yarn add @react-native-async-storage/async-storage