Bienvenido al curso

1

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

2

¿Qué conocimientos me recomiendan para tomar este curso?

Repaso React

3

¿Qué es React y cómo funciona?

4

Preparando nuestro entorno de trabajo

5

Creación de la app con React

6

Agregando funciones a la app con React

7

Stateful vs Stateless

8

Ciclo de vida de React

9

Manejando promesas

10

React Router DOM

Introducción a Redux

11

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

Fases de Redux

12

Introducción: las fases de Redux

13

Store

14

Reducers

15

Conexión a un componente

16

Action Creators

17

Redux Thunk

18

Explicación teórica: ciclo completo de Redux

19

Práctica: ciclo completo de Redux

Fases Extra

20

Archivos Types

21

Try Catch

22

Escenarios asíncronos

23

Componente Spinner

24

Componente Fatal

25

Tabla como componente

Compartir información en Redux

26

Introducción Compartir información en Redux

27

Parámetros por URL

28

Compartir Reducer

29

Múltiples Reducers

30

Llamando a múltiples reducers en una acción

31

Uso del estado en la acción

32

Evitar segundas búsquedas

33

Inmutabilidad

34

Evitar sobrescritura

35

Validación compuesta

36

Validación de errores

37

Modificando respuesta de url

38

Estado con interacción

39

Mostrar componentes dinámicamente

40

Llamadas asincronas dinámicas

41

Props por herencia vs estado

42

Estado compartido

Métodos HTTP

43

Introducción a métodos HTTP

44

Nuevo ciclo Redux

45

Normalizar datos

46

Mapear Objetos

47

Componente para agregar tarea

48

Manejar inputs con Reducer

49

POST

50

Deshabilitando botón

51

Redireccionar

52

Reutilizar componentes

53

PUT

54

DELETE

55

Últimos detalles

Conclusión

56

Conocimientos adquiridos

57

Qué hacer a continuación

Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Curso de Redux por Bedu

Curso de Redux por Bedu

Rodolfo Saldivar

Rodolfo Saldivar

Try Catch

21/57
Recursos

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
}

Aportes 18

Preguntas 4

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

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);
    });
};

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>
    }

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

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

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 },
    });
  }
};

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}`);
  }
};

Genial, todo se esta apuntando para las buenas practicas

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);
    }

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}`);
  }
}

Excelente clase. 🙂

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));
    }
  }
}

Genial

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)
    }
    
}

es importante mostrar al usuarios cuando algo no sale bien!

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
    };
};

buen tip

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

Con un simple y efectivo alert.

import axios from 'axios'
import { TRAER_TODOS } from '../types/userTypes'

export const traerTodos = () => async (dispatch) => {
    try {
        const response = await axios.get('https://jsonplaceholder.typicode.com/users')
        dispatch({
            type: TRAER_TODOS,
            payload: response.data
        })
    } catch(error) {
        alert("Ha ocurrido un error " + error)
    }
}```
import axios from "axios";

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

export const getAll = () => async (dispatch) => {
  let userList;

  try {
      userList = await axios({
      url: "https://jsonplaceholder.typicode.com/users",
      method: "GET",
    });
  } catch (err) {
    console.error('Error:', err.message)
  }

  dispatch({
    type: GET_USERS,
    payload: userList.data,
  });
};