Almacenando varios Pokémon favoritos

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

Darío Condori Humerez

student•

Me salía error de parseo [ ] pero con comillas simples funciona '[]'

export async function getPokemonFavoriteApi() {
    try {
        const response = await AsyncStorage.getItem(FAVORITE_STORAGE)
        console.log("response ", response);
        return JSON.parse(response || '[]')
    } catch (error) {
        throw error
    }
}

Horus Sinhue Camacho Avila

student•

Esta sería tambien otra forma de no romper cuando no se ha instalado por primera vez la app y no has agregado favoritos pero le das click al boton

<export async function getPokemonsFavouriteApi() {
    try {
        const response = await AsyncStorage.getItem(FAVOURITE_STORAGE)
        const responseJSON = JSON.parse(response)
        return responseJSON ? responseJSON : []
    } catch (error) {
        throw error
    }
}>

Laura Natalia Castro Villanueva

student•

Tengo una pregunta y por favor que no se tome como critica ya que yo estoy aprendiendo y me gustaria hacer las cosas de la mejor manera: ¿Si es recomendable que los componentes aunque esten en diferentes carpetas tenga el mismo nombre? pro ejemplo Favorite.js esta en tres carpetas distienta y yo misma me confundo entonces supongo que si alguien viera mi codigo se perderia un poco! a menos que esto se considere una buena practica y por convension otros desarrolladores lo entienda menjor así

David Rangel

student•

Laura, excelente duda. Esto llega a pasar incluso en el ámbito laboral.

Mi recomendación para estos casos es que tú misma en tus proyectos comiences nombrando correctamente los archivos, si es un componente o test unitario recuerda usar la terminación .jsx o tsx, si sólo es lógica usa .ts o .js, los componentes en react se deben escribir con TitleCase y los custom hooks con camelCase, esto te dará pistas de qué estás usando.

Recuerda tener bien acordado con tu equipo la arquitectura de tu proyecto

Si tienes dudas sobre como nombrar los archivos no dudes en levantar la mano y generar acuerdos con tu equipo.

De forma personal para mis proyectos complemento el nombre del archivo con qué es si el nombre del archivo es muy repetido como: "Favourites.ts" y "FavouritesComponent.tsx", eso me da un poco más de claridad sobre qué estoy usando, aunque no es una convención generalizada.

David Rangel

student•

Les dejo los cambios que hice en mi repo que aplican para esta clase:

Lo que hice fue una función que si detecta el id del pokemon en el array de favoritos, lo elimina y si no lo detecta, lo agrega. :)

El poder de los condicionales.

export async function getPokemonFavoriteApi() {
    try {
        const response = await AsyncStorage.getItem(FAVORITE_STORAGE)
        console.log("response ", response);
        return JSON.parse(response || '[]')
    } catch (error) {
        throw error
    }
}

<export async function getPokemonsFavouriteApi() {
    try {
        const response = await AsyncStorage.getItem(FAVOURITE_STORAGE)
        const responseJSON = JSON.parse(response)
        return responseJSON ? responseJSON : []
    } catch (error) {
        throw error
    }
}> 

Almacenando varios Pokémon favoritos

Sistema de formularios

Descarga el código base del proyecto

Pantalla de Mi cuenta

Formulario de Login

Sistema de formularios avanzados

Implementando Formik y Yup

Iniciando sesión

useAuth: manejo de sesiones con Custom Hooks y React Context

Datos del usuario y logout

Sistema de favoritos

Botón de añadir a favoritos

Almacenando un Pokémon favorito con AsyncStorage

Almacenando varios Pokémon favoritos

Pantalla de favoritos

Toggle en el botón de favoritos

Eliminar Pokémon de favoritos

Lista de Pokémon favoritos

Navegación hacia atrás en favoritos

Logout

Sincronizando información entre pantallas

Pre deploy

Configuración básica antes del BUILD

Cómo generar el APK y AAB para Android

Cómo generar la app para iOS

¿Quieres cursos más avanzados de React Native?