Try Catch

Clase 21 de 57 • Curso de Redux por Bedu

Contenido del curso

Bienvenido al curso

Repaso React

Introducción a Redux

11
¿Qúe es Redux, cuándo usarlo y por qué?
00:15 min

Fases de Redux

Fases Extra

Compartir información en Redux

Métodos HTTP

Conclusión

Tomar examen

Resumen

try permite definir un bloque de código para que se analice en busca de errores mientras se ejecuta.

catch permite definir un bloque de código para ejecutarse, si se produce un error en el bloque try.

Ejemplo de uso:

try {  
// Bloque de código a intentar
}  
catch(Exception _e_) {  
// Bloque de código para manejar errores
}

Comentarios

Eduardo Serrano Jaime

student•

También podemos manejar el axios como una promesa

import axios from "axios";

import { TRAER_TODOS } from "../types/usuariosTypes";

export const traerTodos = () => async dispatch => {
  await axios
    .get("https://jsonplaceholder.typicode.com/userss")
    .then(response => {
      dispatch({
        type: TRAER_TODOS,
        payload: response.data
      });
    })
    .catch(error => {
      console.log("Error: " + error.message);
    });
};

Matías Gabriel Navarro

student•

Yo particularmente también quise manejar el error presentandolo en el UI:

Primero en el action maneje el error con otro tipo de dispatch

import axios from 'axios'
import { BRING_ALL_USERS as bringUsers } from '../types/usersTypes'

export const bringAllUsers = () => async dispatch => {
  try {
    const { data } = await axios.get('https://jsonplaceholder.typicode.com/userss')
    dispatch({
      type: bringUsers,
      payload: data
    })
  } catch (err) {
    dispatch({
      type: 'error',
      payload: err
    })
  }
}

Luego en el usersReducers.js asigne un nuevo valor al estado llamado error y manejé ese tipo de condicional

import { BRING_ALL_USERS as bringUsers } from '../types/usersTypes'

const INITIAL_STATE = {
  users: [],
  error: null
}

export default (state = INITIAL_STATE, action) => {
  switch (action.type) {
    
    case bringUsers:
      return { ...state, users: action.payload }
    case 'error':
      return {...state, error: action.payload }

    default: return state
  }

Como último en el componente un simple If al método render()

    if (this.props.error){
      return <h1>{this.props.error.message}</h1>
    }

Willy David Da Conceicao Lozada

student•

exelente amigo! asi tenia pensarlo hacerlo yo pero lo dejare como lo hizo en el video.

Jhean Pacheco

student•

Cree una pantalla para los errores, les comparto mi implementación

Código

import types from './types';

export const getUsers = () => async (dispatch) => {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/uers');

    if (response.ok) {
      const data = await response.json();

      dispatch({
        type: types.GET_USERS,
        payload: data,
      });
    } else {
      dispatch({
        type: types.ERROR,
        payload: {
          origin: types.GET_USERS,
          message: `Fetch error (${response.status})`,
        },
      });
    }
  } catch (error) {
    dispatch({
      type: types.ERROR,
      payload: { origin: types.GET_USERS, message: error.message },
    });
  }
};

Cristobal Vega

student•

Si quieren ser más sofisticados con los errores en consola V8 nos da la opción de usar

console.error(error.message);```

Cristian Martinez

student•

En mi caso el error que tuve fue de timeout, entonces lo solucioné enviando un objeto de configuración con el tiempo máximo de espera a que la petición a la url responda, en este caso es de 3 segundo o 3000 milisegundos.

import axios from "axios";
import { GET_ALL } from "../types/userTypes";

export const getAll = () => async (dispatch) => {
  try {
    const response = await axios.get(
      "https://jsonplaceholder.typicode.com/users",
      { timeout: 3000 }
    );

    dispatch({
      type: GET_ALL,
      payload: response.data,
    });
  } catch (error) {
    console.log(`Error: ${error.message}`);
  }
};

Frank Antonio Piñin Ato

student•

Genial, todo se esta apuntando para las buenas practicas

Oyarzabal Ivan

student•

Si quieren ver el codigo de error que proporciona la API (en caso de que tenga) pueden usar el siguiente formato

} catch (error) {
        console.error(error.response.data);
    }

Miguel Angel Reyes Moreno

student•

El try catch no podía quedarse afuera, esto es para manejar las execepciones y cuando traemos información de una API es obligatorio usarlo por buenas prácticas.

usuariosActions.js:

export const traerTodos = () =>  async (dispatch) => { //* Función que retorna otra función
  try {
    const respuesta = await axios.get('https://jsonplaceholder.typicode.com/users');
    dispatch({ //* Este dispatch se comunicará con el reducer
      type: TRAER_TODOS,
      payload: respuesta.data,
    });
  } catch (error) {
    console.error(`Error: ${error.message}`);
  }
}

Cristian Andres Ladino Peña

student•

Excelente clase. 🙂

Yosef Enmanuel Blandin Rios

student•

¿Cual es mas recomendable? Hacer el console.log con el error.message o hacer un: throw new Error(error.message)?

Leonardo de los angeles Espinoza Hernandez

student•

Hola @YosefBlandin

Depende el caso, por lo regular se ocupa console.warn cuando algo puede generar un posible fallo en el script pero puede seguir corriendo, como tal solo adviertes sobre ese fallo con console.warn

Por otro lado, la sentencia throw new Error() detiene la ejecución del script agregando un mensaje personalizado, úsalo cuando quieres detener por completo la ejecución de tu script si algo no cumple con cierta condición o ocurre algo inesperado que dañe el funcionamiento correcto del script.

Un saludo!

José Hugo Calderón Villanueva

student•

Para una llamada con post o tambien con get podria hacer lo siguiente?? cual seria la mejor opción.???

export function getAgencias() { let configHeaders = { } var bodyParameters = { } return (dispatch) => { //Begin Request dispatch({type: agenciaConstants.AGENCIA_REQUEST}); return axios .post(${URI_GESVAL_AGENCIA}/get-totallist-agencia,bodyParameters,configHeaders) .then((response)=>{ dispatch({type: agenciaConstants.AGENCIA_SUCCESS, data:response.data, loading:false}); }).catch(error => { if (error.response){ let newError = error.response ? error.response.data : genericConstants.MSG_ERROR_WS dispatch({type: agenciaConstants.AGENCIA_ERROR, error:newError, loading:false}); } }); }; }

Gerson Montenegro

student•

En la práctica tú podrías resolver casi todo con GET, aunque depende de cómo estén configurados los servicios en el servidor. El asunto tiene más que ver con buenas prácticas, nomenclatura, y saber qué verbo usar en uno u otro caso, porque al fin y al cabo cada uno tiene una función y al ser usados correctamente, vamos a entender más fácil la aplicación donde estemos trabajando.

En tu casi particular, cuando solo quieres extraer datos del servidor usas GET.

En esta clase del curso de Postman se puede ver más al respecto.

David Dias

student•

Podemos eliminar también el error 404 que lanza antes del console.log?

Luis Lira

student•

Hola!

El error nativo que recibe el navegador, tengo entendido que no se puede quitar, por lo mismo de que es algo que hace el mismo navegador de manera interna al recibir algún código de respuesta de error.

Juan Felipe Salamanca Gonzalez

student•

En que otros casos es aplicable el Try Catch de lo que ya hemos hecho durante el curso?

David Camacho

student•

Cuando quieres capturar un error... O simplemente validar que el código que está en el try se ejecute de manera correcta...

Juan Castro

teacher•

Estas lecturas te pueden ayudar:

Andrés Felipe Eslava Zuluaga

student•

En este caso, realiza un llamado a la API con el endpoint erróneo. Se controla creando un nuevo objeto que encapsula el Error, luego que solo se exponga en consola. Esto es una práctica que he visto en trabajos donde he colaborado. Es una buena práctica porque CONTROLA el error. Pero también permite tomar decisiones, que pueden ser sencillas o del modelo del negocio.

// usersActions.js
import axios from 'axios';
import { GET_USERS } from '../types/usersTypes';

const API_URL = 'https://jsonplaceholder.typicode.com/userds';

export const getUsers = () => {
  return async (dispatch) => {
    try {
      const response = await axios.get(API_URL);
      dispatch({
        type: GET_USERS,
        payload: response.data
      });
    } catch (err) {
      new Error(console.error('Error occured: ', err.message));
    }
  }
}

Johan García Trejo

student•

Genial

Osvaldo Trejo

student•

import { EXPORTAR_TODOS  } from '../types/usersTypes'


export const traerTodos = () => async (dispatch) => {
    try{
        var response = await  fetch('https://jsonplaceholder.typicode.com/users')
        var data = await  response.json()
        dispatch({
            type: EXPORTAR_TODOS ,
            payload: data
        })
    }
    catch(error){
        console.log(error.message)
    }
    
}

Camilo Alexander Velandia Velandia

student•

es importante mostrar al usuarios cuando algo no sale bien!

René Sanchez

student•

Deje de esta manera para optimizar el codigo un poco en la parte de las peticiones get

  try {
        const { data } = await axios.get('https://jsonplaceholder.typicode.com/users');

        dispatch({
            type: TRAER_USUARIOS,
            payload: data
        })
    } catch (error) {
        console.error(error);
        dispatch({
            type: ERROR,
            payload: error.message
        })
    }

Tambien cambie la parte de obtener los estados para el componente para unicamente saquemos lo que necesitamos ya que el estar repitiendo mil veces lo mismo para sacar una propiedad diferente no tiene mucho sentido Asi que hice esto para destructurar el objeto y sacar lo que necesitamos :)


const EstadosAPropiedades = ({ UsuarioReducer: { usuarios, error } }) => {
    return {
        usuarios,
        error
    };
};

Carlos Javier Bazan Huaman

student•

buen tip

Brayan Mateo Montañez Baron

student•

Si bien es cierto se puede manejar el error del mismo modo pero con promesas. Me gusta mas el try catch Me recuerda la epoca de Java

import axios from "axios";

import { TRAER_TODOS } from "../types/usuariosTypes";

export const traerTodos = () => async dispatch => {
  await axios
    .get("https://jsonplaceholder.typicode.com/userss")
    .then(response => {
      dispatch({
        type: TRAER_TODOS,
        payload: response.data
      });
    })
    .catch(error => {
      console.log("Error: " + error.message);
    });
};

import axios from 'axios'
import { BRING_ALL_USERS as bringUsers } from '../types/usersTypes'

export const bringAllUsers = () => async dispatch => {
  try {
    const { data } = await axios.get('https://jsonplaceholder.typicode.com/userss')
    dispatch({
      type: bringUsers,
      payload: data
    })
  } catch (err) {
    dispatch({
      type: 'error',
      payload: err
    })
  }
}

import { BRING_ALL_USERS as bringUsers } from '../types/usersTypes'

const INITIAL_STATE = {
  users: [],
  error: null
}

export default (state = INITIAL_STATE, action) => {
  switch (action.type) {
    
    case bringUsers:
      return { ...state, users: action.payload }
    case 'error':
      return {...state, error: action.payload }

    default: return state
  }

import types from './types';

export const getUsers = () => async (dispatch) => {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/uers');

    if (response.ok) {
      const data = await response.json();

      dispatch({
        type: types.GET_USERS,
        payload: data,
      });
    } else {
      dispatch({
        type: types.ERROR,
        payload: {
          origin: types.GET_USERS,
          message: `Fetch error (${response.status})`,
        },
      });
    }
  } catch (error) {
    dispatch({
      type: types.ERROR,
      payload: { origin: types.GET_USERS, message: error.message },
    });
  }
};

import axios from "axios";
import { GET_ALL } from "../types/userTypes";

export const getAll = () => async (dispatch) => {
  try {
    const response = await axios.get(
      "https://jsonplaceholder.typicode.com/users",
      { timeout: 3000 }
    );

    dispatch({
      type: GET_ALL,
      payload: response.data,
    });
  } catch (error) {
    console.log(`Error: ${error.message}`);
  }
};

export const traerTodos = () =>  async (dispatch) => { //* Función que retorna otra función
  try {
    const respuesta = await axios.get('https://jsonplaceholder.typicode.com/users');
    dispatch({ //* Este dispatch se comunicará con el reducer
      type: TRAER_TODOS,
      payload: respuesta.data,
    });
  } catch (error) {
    console.error(`Error: ${error.message}`);
  }
}

// usersActions.js
import axios from 'axios';
import { GET_USERS } from '../types/usersTypes';

const API_URL = 'https://jsonplaceholder.typicode.com/userds';

export const getUsers = () => {
  return async (dispatch) => {
    try {
      const response = await axios.get(API_URL);
      dispatch({
        type: GET_USERS,
        payload: response.data
      });
    } catch (err) {
      new Error(console.error('Error occured: ', err.message));
    }
  }
}

import { EXPORTAR_TODOS  } from '../types/usersTypes'


export const traerTodos = () => async (dispatch) => {
    try{
        var response = await  fetch('https://jsonplaceholder.typicode.com/users')
        var data = await  response.json()
        dispatch({
            type: EXPORTAR_TODOS ,
            payload: data
        })
    }
    catch(error){
        console.log(error.message)
    }
    
}

  try {
        const { data } = await axios.get('https://jsonplaceholder.typicode.com/users');

        dispatch({
            type: TRAER_USUARIOS,
            payload: data
        })
    } catch (error) {
        console.error(error);
        dispatch({
            type: ERROR,
            payload: error.message
        })
    }

Try Catch

Bienvenido al curso

Conoce a tu profesor y todo lo que aprenderás sobre Redux

¿Qué conocimientos me recomiendan para tomar este curso?

Repaso React

¿Qué es React y cómo funciona?

Preparando nuestro entorno de trabajo

Creación de la app con React

Agregando funciones a la app con React

Stateful vs Stateless

Ciclo de vida de React

Manejando promesas

React Router DOM

Introducción a Redux

¿Qúe es Redux, cuándo usarlo y por qué?

Fases de Redux

Introducción: las fases de Redux

Store

Reducers

Conexión a un componente

Action Creators

Redux Thunk

Explicación teórica: ciclo completo de Redux

Práctica: ciclo completo de Redux

Fases Extra

Archivos Types

Try Catch

Escenarios asíncronos

Componente Spinner

Componente Fatal

Tabla como componente

Compartir información en Redux

Introducción Compartir información en Redux

Parámetros por URL

Compartir Reducer

Múltiples Reducers

Llamando a múltiples reducers en una acción

Uso del estado en la acción

Evitar segundas búsquedas

Inmutabilidad

Evitar sobrescritura

Validación compuesta

Validación de errores

Modificando respuesta de url

Estado con interacción

Mostrar componentes dinámicamente

Llamadas asincronas dinámicas

Props por herencia vs estado

Estado compartido

Métodos HTTP

Introducción a métodos HTTP

Nuevo ciclo Redux

Normalizar datos

Mapear Objetos

Componente para agregar tarea

Manejar inputs con Reducer

POST

Deshabilitando botón

Redireccionar

Reutilizar componentes

PUT

DELETE

Últimos detalles

Conclusión

Conocimientos adquiridos

Qué hacer a continuación