Consultando la API de detalles del Pokemon

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

Contenido del curso

Inicializando la app

API y listado de Pokemon

Detalles del Pokemon

Tomar examen

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 de 17

Clase 13 / 17

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.

Inicializando la app

Creación del proyecto: PokeDex

Configuración de React Navigation

Diseñando la Tab navigation con iconos

Stack de navegación para Pokedex

API y listado de Pokemon

Consumo de APIs con fetch: PokeApi

Información de todos los Pokemon

Lista de Pokemon con FlatList

Renderizando la PokemonCard

Clasificación por colores y utilidades de Lodash

Infinite scrolling con FlatList

Añadiendo StyleSheet a la lista

Detalles del Pokemon

Vista y navegación al detalle del Pokemon

Consultando la API de detalles del Pokemon

Maquetación del Pokemon: header

Maquetación del Pokemon: sección de tipos

Maquetación del Pokemon: estadísticas

Maquetación del Pokemon: barra de navegación

Consultando la API de detalles del Pokemon

Progreso del curso

Inicializando la app

API y listado de Pokemon

Detalles del Pokemon