Cursos Empresas Blog Live Conf Eventos Precios

0:006:36

Consultando la API de detalles del Pokemon

Curso de React Native: Manejo de Listas y Consumo de APIs

Clase 13 / 17

Ver clases

Consultando la API de detalles del Pokemon

Curso de React Native: Manejo de Listas y Consumo de APIs

Clase 13 de 17

Clase 13 / 17

Consultando la API de detalles del Pokemon

Curso de React Native: Manejo de Listas y Consumo de APIs

Clase 13 / 17

Ver clases

GEMILLE ADASSI VAZQUEZ ESTRADA

Hace 3 años

#Mejora el rendimiento

El useEffect podemos solo hacer una petición en lugar de una cada que cambie el params.


  useEffect(() => {
    const fetchPokemonDetails = async () => {
      try {
        const response = await getPokemonDetailsByIdApi(params.id);
        dispatch(setPokemonDetails(response))
      } catch (error) {
        navigation.goBack();
      }
    };

    fetchPokemonDetails();
  }, []);

``` 2. El uso de React.memo

```js
import React, { useEffect } from 'react'
import { StyleSheet, Text, View } from 'react-native'
import { useDispatch, useSelector } from 'react-redux';
import { setPokemonDetails } from '../redux/slices/pokemonDetailSlice';
import { getPokemonDetailsByIdApi } from '../api/pokemon';

export const Pokemon = React.memo((props) => {
  const { navigation, route: { params } } = props;
  const dispatch = useDispatch();
  const pokemon = useSelector((state) => state.pokemonDetail.pokemon);
  console.log(pokemon)

  useEffect(() => {
    const fetchPokemonDetails = async () => {
      try {
        const response = await getPokemonDetailsByIdApi(params.id);
        dispatch(setPokemonDetails(response))
      } catch (error) {
        navigation.goBack();
      }
    };

    fetchPokemonDetails();
  }, []);


  if(!pokemon) return null;

  return (
    <View>
      <Text>Pokemon</Text>
      <Text>{pokemon.name}</Text>
    </View>
  )
})

const styles = StyleSheet.create({})
```3. En el app js, habilita el enableScreens (hay que instalar la react-native-screens, lo que mejora considerablemente la navegación al usar componentes nativos en lugar de las vistas de react native (al menos en iOS).


```js
import { NavigationContainer } from "@react-navigation/native";
import { Navigation } from "./src/navigation/Navigation";
import { Provider } from "react-redux";
import { store } from "./src/redux/store";
import { AppRegistry } from 'react-native';
import React from 'react';
import { name as appName } from './app.json';
import { enableScreens } from 'react-native-screens';

enableScreens();

const App = () => {
  return (
    <Provider store={store}>
      <NavigationContainer>
        <Navigation />
      </NavigationContainer>
    </Provider>
  );
}

AppRegistry.registerComponent(appName, () => App);

export default App;

```4. Y por último, ya es posible pasar objetos por lo que no es necesario otro fetch, sin embargo, siguiendo el curso, esto puede ayudar bastante.

Comentarios (8)8 comentarios

Nicolas Florez

Hace 4 años

Actualmente ya es posible pasar objetos de referencia (funciones, objetos literales etc.) por los params de navegación, por lo que no hace falta hacer otro fetch dentro de la screen del pokemon. La mayoría de cosas del curso relacionadas a React Navigation son distintas ahora, te recomiendo que revises la documentación para actualizar lo que estás aprendiendo en este curso: https://reactnavigation.org/

Cristian Iñiguez

Hace 5 años

En TypeScript debemos tipar estas props usando el genérico NativeStackScreenProps y el tipado de los screens::

import { FC, useEffect, useState } from 'react';
...
import type { PokedexStackParamList } from '../navigation/PokedexNavigation';

type PokemonProps = NativeStackScreenProps<PokedexStackParamList, 'Pokemon'>;

const Pokemon: FC<PokemonProps> = ({ navigation, route: { params } }) => {
	console.log(params.id); // sin errores
  ...

  return (...);
};

export default Pokemon;

Donde PokedexStackParamList es:

export type PokedexStackParamList = {
  Pokedex: undefined;
  Pokemon: {
    id: string;
  };
};

Alfredo Lopez

Odalis Dariel Abreu Mejia

Bryan Garcia

Hace 2 años

Hacer un throw error en el catch no tiene sentido.

Recuerden que el catch es para capturar los errores existentes provenientes de las promesas, retornadas por fetch o el método json (en el caso que estamos aplicando específicamente). Es decir, capturar los errores específicos de acciones que podría, el resultado, no depender de nosotros. Así evitamos que se detenga la ejecución de nuestro código y llevamos a cabo una acción para subsanarlo.

Hacer un throw error solo generaría otro error que detendría la ejecución de nuestro código sin darle solución al error anterior.

Como estamos aprendiendo, lo mejor es hacer un console.log del error, así podemos ver en la terminal lo que sucedió. Y si usamos un throw error procuremos que esto no vaya a un ambiente de producción. (al igual que los console jeje)

Daniel Ochoa

Cuanod usen el Tab Navigator combinado con el Stack Navigator si quieren mantener el Stack (Ya que este generalmente nos permite volver) como el que maneja el Header, para apagar el header del Tab usen headerShown: false, no usen transparent ya que esa propiedad genera muchos problemas, entre ellos que el header sigue ahi y en una capa superior, por lo que no te va dejar darle click al boton de volver y además se va a hacer un overflow en android del contenido hacia el status bar.

Jeison Triana

no entiendo por qué crear un servicio con un try catch si por ejemplo se dispara un error de todas formas va a lanzar la excepción

Bernardo Ayala Montezuma

Hola Jeison,

La idea es que puedas manejar el error de alguna forma para que los usuarios finales no tengan páginas con las que no puedan interactuar, o que estén toda en blanco sin ninguna explicación.

Un dev podría entrar en el inspector y ver que en efecto hay un error en el código, pero un usuario no técnico no tendría idea de que está sucediendo.

Entonces podríamos, por ejemplo, usar un try catch para crear un mensaje en pantalla que diga "Lo sentimos, ha ocurrido un error inesperado" en caso de que se dispare alguna excepción.

Consultando la API de detalles del Pokemon

Consultando la API de detalles del Pokemon

Consultando la API de detalles del Pokemon

Progreso del curso

Inicializando la app

API y listado de Pokemon

Detalles del Pokemon

Consultando la API de detalles del Pokemon

Consultando la API de detalles del Pokemon

Comentarios

#Mejora el rendimiento

Comentarios

#Mejora el rendimiento