Escenarios asíncronos

Clase 22 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

Comentarios

Nadir Antonio Soza Solis

student•

Se me hace mas facil crear un objeto que contenga todas las constantes de los Action, a continuacion el codigo

actionType.js

export const actionType = {
  SET_INITIAL_STATE: "SET_INITIAL_STATE",
  LOADING: "LOADING"
};

Reducer.js

export default (state = SET_INITIAL_STATE, action) => {
  switch (action.type) {
    case actionType.SET_INITIAL_STATE:
      return {
        ...state,
        aboutMe: action.payload.aboutMe,
        firebase: action.payload.firebase,
        user: action.payload.user
      };
    case actionType.LOADING:
      return {
        ...state,
        loading: true
      };
    default:
      return state;
  }
};

Action.js


export const setInititalState = () => dispatch => {
  dispatch({
    type: actionType.LOADING
  });
  try {
    dispatch({
      type: actionType.SET_INITIAL_STATE,
      payload: {
        aboutMe: { ...aboutMe },
        firebase: { ...firebaseRef },
        user: {}
      }
    });
  } catch (error) {
    console.log(error.message);
  }
};```

Andrés Felipe Eslava Zuluaga

student•

Es una excelente solución. La veo cómo que si en el futuro, el app llega a crecer, ya tenían seccionado dentro de un solo objeto todos esos actions!

Edsom LLanque

student•

Esto es mala práctica xd

David Dias

student•

Es cuestión de ver que escribimos la palabra async y enseguida pensar en los 3 estados

Alejandro Gómez García

student•

No me parece que sea necesario hacer un reducer, action y type solo para indicar que la página esta cargando. En realidad la propiedad "loading" no necesita ser global, se puede manejar localmente de la siguiente forma:

class Usuarios extends Component {
	constructor(){
		super();
		this.state = { loading: true }; //indicamos que el componente inicia cargando.
	}

	async componentDidMount(){
		await this.props.traerTodos();//esperamos a que carguen los datos.
		this.setState({loading: false});//dejamos de cargar al recibir los datos.
	}

	render(){
		if(this.state.loading) return 'Loading...';//si los datos están cargando, mostramos un mensaje.

		return (
			//al terminar la carga, se mostrará la página.
		);
	}
}

Jhon Alexander Romero Gonzaga

student•

Tu solución funciona correctamente pero tendrias que creando un estado de loading en cada componente cuando quieras integrar a los usuarios o cualquier otra petición http y nosotros como desarrolladores lo menos que queremos es estar reptiendo lo mismo que tranquilamente lo podemos obtener de manera global.

Andrés Felipe Eslava Zuluaga

student•

Tu posición es completamente válida, pero piensa en futuro y en que tu aplicación crece. Entonces, no valdrá la pena tener un estado de cargando por archivo, que es justamente lo que pasaría, por el contrario, si tu estado de cargando puede usarse en más partes del App, consideralo como un estado global.

Edgar Lopez Arroyo

student•

Vaya todo empieza a tomar forma, Vi esto anteriormente y lo comprendía de manera muy superficial. Ahora entiendo mas a profundidad.

Wandy Rafael Santana Evangelista

student•

Hola Devs: -Aqui les comparto mi avance, con mi respectiva manera:

Mi archivo principal Users:

Mis Actions:

Mis Reducers:

Recuerda, #NuncaParesDeAprender 💚

Alejandro Mejia Escobar

student•

Actualmente JS no exige el uso de punto y coma... ¿Por qué seguirlo utilizando?

Carlos Eduardo Gomez García

teacher•

Por mantener buenas prácticas y porque puede haber casos muy específicos donde sí sea obligatorio :D Pero si quieres puedes simplemente no usarlos ;)

Ponciano Guevara Lozano

student•

Por buenas practicas
Por los casos específicos en los que si es requerido (se que tu puedes investigar mas)
Para evitar errores cuando empaquetes tu código

Betty Rossana Jimenez Cedeño

student•

Me encanta como se pueden comunicar entre ellos.

Frank Antonio Piñin Ato

student•

Y en ves de poner simplemente mensajes asi como esos se puede poner toda una interfaz en el cargando o en el errror?

Juan Felipe Salamanca Gonzalez

student•

Claro que si, puedes crearlos con una función y importarlos como componentes en el curso de React en Platzi: React en Platzi

y ademas puedes encontrar varios estilos para el cargando en este sitio Web:

Cristhian Laurente López

student•

claro que si. manejando tan solamente el state tanto del error como del cargando ya puedes manejarlo en una interfaz

Brayan Mateo Montañez Baron

student•

Pase por un problema muy grande Traté de hacer el llamado a la API con fetch pero no me entraba al catch en caso del error Alguien por favor que me explique ¿por qué? Aquí el código

export const getTodos = () => async (dispatch) => {
    dispatch({
        type: LOADING,
    })
    try {
        const data = await fetch('https://jsonplaceholder.typicode.com/usersSSS/');
        const response = await data.json();
        await dispatch({
            type: GET_TODOS,
            payload: response
        })
    } catch (error) {
        await dispatch({
            type: ERROR,
            payload: error.message
        })
    }
}

Ángel David Roque Ayala

student•

Una llamada fetch () solo se rechaza si la solicitud de red falla por algún motivo (no se encuentra el host, no hay conexión, el servidor no responde, etc.).

Cualquier resultado del servidor (404, 500, etc.) se considera una solicitud exitosa desde el punto de vista de la promesa.

Es gracioso, pero básicamente estamos realizando una solicitud al servidor y el servidor le respondió, por lo que desde el punto de vista de la red, la solicitud finalizó con éxito.

Luego de comprobar que la respuesta fue exitosa, debemos comprobar que el status de la petición es el que esperamos (200 por ejemplo) o comprar que el status sea distinto de 404.

Héctor Eduardo López Carballo

student•

Hola!

Fetch nunca va a salir como error aunque el status sea 400 o 500, esto es por la forma en la que funciona. Para conocer el código necesario acceder a .

Marcos Mercado Coca

student•

Alguién me puede decir por qué no es necesario el break en los switch?

Abraham Alonzo Velazquez

student•

Si tienes un return en un switch que esta dentro de una función, el código que le sigue no se ejecutara y "regresar el valor".

John Cardenas

student•

Hola Marcos. Break no es. Esto es porque una condición se cumpliría cuando ninguna de las otras se cumple, y poner el break en cada caso sería un poco redundante. Sin embargo, la documentación siempre recomienda hacerlo. Es una decisión personal :)

Kenneth Angulo L

student•

Comparto mi solucion, contiene el manejo de los tres casos: loading, fetch y error. tambien le puse un timeout para simular un tiempo de demora consultanod la api, asi se aprecia mas el componente loading.

usersActionsCreator.js >>

import { FETCH_USERS, LOADING_USERS, ERROR_USERS } from "./actionTypes";
import Axios from 'axios';

/**
 * Action creator para usuarios
 * @returns distpatch varias acciones
 */
export const fetchUsers = () => (distpatch) =>{

    //Le comunica al reducer los diferentes casos
    distpatch({
        type: LOADING_USERS,
    })
    setTimeout( async ()=>{
        try {
            const response = await Axios({
            url: "https://jsonplaceholder.typicode.com/users",
            });
            distpatch({
                type: FETCH_USERS,
                payload: response.data
            })
        } catch (error) {
            distpatch({
                type: ERROR_USERS,
                payload: error
            })
        }

    }, 1000 );
}

export const getUsers = () => () =>{
    console.log('esto podria ser otra funcion ... trayendo ususaios');
}

usersReducer.js >>

import { FETCH_USERS, LOADING_USERS, ERROR_USERS } from "../Actions/actionTypes";

const INITIAL_STATE = {
    users: [],
    loading: false,
    error: ''
};


/**
 * Reducer: Dependiendo de cada caso, actualiza los estados
 */

// eslint-disable-next-line import/no-anonymous-default-export
export default (state = INITIAL_STATE, action) => {
    switch (action.type) {

        case LOADING_USERS:
            return {
                ...state,
                loading: true
            }

        case FETCH_USERS:
            return {
                ...state,
                users: action.payload,
                loading: false
            }

        case ERROR_USERS:
            return {
                ...state,
                error: action.payload,
                loading: false
            }

        default:
            return state
    }
}

actionTypes.js >>

export const FETCH_USERS = 'fetch_all_users';
export const LOADING_USERS = 'loading_users';
export const ERROR_USERS = 'error_users';

Miguel Angel Reyes Moreno

student•

Escenarios asíncronos

Siempre debemos de manejar los casos de:

Cuando está cargando
Cuando fue exitoso
Cuando hay un error

Nuestro sitio está cargando información cuando entramos a una página.

Lo que haremos es mostrar cuando la información está cargando, cuando hay éxito y cuando hay error:

usuariosTypes.js:

export const TRAER_TODOS = 'traer_todos';
export const CARGANDO = 'cargando';
export const ERROR = 'error';

usuariosReducers.js:

import { TRAER_TODOS, CARGANDO, ERROR } from '../types/usuariosTypes';

const INITIAL_STATE = {
  usuarios: [],
  cargando: false,
  error: ''
};

export default (state = INITIAL_STATE, action) => { //* El estado es el initial state que regresa una función
  //!Se crea el switch porque llegarán varias tareas y solo se distingue por el nombre
  switch(action.type) {
    case TRAER_TODOS:
      return { ...state, usuarios: action.payload, cargando: false };
    case CARGANDO:
      return { ...state, cargando: true};
    case ERROR:
      return { ...state, error: action.payload, cargando: false };
    default: return state;
  }
}

usuariosActions.js:

import axios from 'axios';
import { TRAER_TODOS, CARGANDO, ERROR } from '../types/usuariosTypes';

//*Esto es una promesa por estar haciendo una petición HTTP GET
export const traerTodos = () =>  async (dispatch) => { //* Función que retorna otra función
  dispatch({
    type: CARGANDO
  });

  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}`);
    dispatch({
      type: ERROR,
      payload: error.message,
    })
  }
}

Paul Cortes

student•

Genial los casos obligatorios a controlar de una llamada asíncrona:

Cuando esta cargando
Cuando fue exitoso
Cuando fue un error

Kevin Martello Mayorga Cleveland

student•

Muy buena practica

Jorge Alexander Salcedo Alvarez

student•

Va excelente este curso. bastante claro.

Roberto Del Valle

student•

Excelente clase

Karla

student•

Excelente clase 👏

Rafael Enrique Gonzalez

student•

Excelente

José Hugo Calderón Villanueva

student•

Muy Buena explicación. Buena clase.

Manuel Rivera

student•

Excellent, esto lo estaba preguntando unas clases antes, come On !!

export default (state = SET_INITIAL_STATE, action) => {
  switch (action.type) {
    case actionType.SET_INITIAL_STATE:
      return {
        ...state,
        aboutMe: action.payload.aboutMe,
        firebase: action.payload.firebase,
        user: action.payload.user
      };
    case actionType.LOADING:
      return {
        ...state,
        loading: true
      };
    default:
      return state;
  }
};

export const setInititalState = () => dispatch => {
  dispatch({
    type: actionType.LOADING
  });
  try {
    dispatch({
      type: actionType.SET_INITIAL_STATE,
      payload: {
        aboutMe: { ...aboutMe },
        firebase: { ...firebaseRef },
        user: {}
      }
    });
  } catch (error) {
    console.log(error.message);
  }
};```

class Usuarios extends Component {
	constructor(){
		super();
		this.state = { loading: true }; //indicamos que el componente inicia cargando.
	}

	async componentDidMount(){
		await this.props.traerTodos();//esperamos a que carguen los datos.
		this.setState({loading: false});//dejamos de cargar al recibir los datos.
	}

	render(){
		if(this.state.loading) return 'Loading...';//si los datos están cargando, mostramos un mensaje.

		return (
			//al terminar la carga, se mostrará la página.
		);
	}
}

export const getTodos = () => async (dispatch) => {
    dispatch({
        type: LOADING,
    })
    try {
        const data = await fetch('https://jsonplaceholder.typicode.com/usersSSS/');
        const response = await data.json();
        await dispatch({
            type: GET_TODOS,
            payload: response
        })
    } catch (error) {
        await dispatch({
            type: ERROR,
            payload: error.message
        })
    }
}

import { FETCH_USERS, LOADING_USERS, ERROR_USERS } from "./actionTypes";
import Axios from 'axios';

/**
 * Action creator para usuarios
 * @returns distpatch varias acciones
 */
export const fetchUsers = () => (distpatch) =>{

    //Le comunica al reducer los diferentes casos
    distpatch({
        type: LOADING_USERS,
    })
    setTimeout( async ()=>{
        try {
            const response = await Axios({
            url: "https://jsonplaceholder.typicode.com/users",
            });
            distpatch({
                type: FETCH_USERS,
                payload: response.data
            })
        } catch (error) {
            distpatch({
                type: ERROR_USERS,
                payload: error
            })
        }

    }, 1000 );
}

export const getUsers = () => () =>{
    console.log('esto podria ser otra funcion ... trayendo ususaios');
}

import { FETCH_USERS, LOADING_USERS, ERROR_USERS } from "../Actions/actionTypes";

const INITIAL_STATE = {
    users: [],
    loading: false,
    error: ''
};


/**
 * Reducer: Dependiendo de cada caso, actualiza los estados
 */

// eslint-disable-next-line import/no-anonymous-default-export
export default (state = INITIAL_STATE, action) => {
    switch (action.type) {

        case LOADING_USERS:
            return {
                ...state,
                loading: true
            }

        case FETCH_USERS:
            return {
                ...state,
                users: action.payload,
                loading: false
            }

        case ERROR_USERS:
            return {
                ...state,
                error: action.payload,
                loading: false
            }

        default:
            return state
    }
}

import { TRAER_TODOS, CARGANDO, ERROR } from '../types/usuariosTypes';

const INITIAL_STATE = {
  usuarios: [],
  cargando: false,
  error: ''
};

export default (state = INITIAL_STATE, action) => { //* El estado es el initial state que regresa una función
  //!Se crea el switch porque llegarán varias tareas y solo se distingue por el nombre
  switch(action.type) {
    case TRAER_TODOS:
      return { ...state, usuarios: action.payload, cargando: false };
    case CARGANDO:
      return { ...state, cargando: true};
    case ERROR:
      return { ...state, error: action.payload, cargando: false };
    default: return state;
  }
}

import axios from 'axios';
import { TRAER_TODOS, CARGANDO, ERROR } from '../types/usuariosTypes';

//*Esto es una promesa por estar haciendo una petición HTTP GET
export const traerTodos = () =>  async (dispatch) => { //* Función que retorna otra función
  dispatch({
    type: CARGANDO
  });

  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}`);
    dispatch({
      type: ERROR,
      payload: error.message,
    })
  }
}

Escenarios asíncronos

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