Validación de errores

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

Iván Darío Sánchez Jiménez

student•

Cuando requieran simular latencia en su navegador para observar los Spinner por ejemplo, pueden ir al inspector de elementos, network y cambiar en la lista desplegable donde indica online por una red mas lenta como Slow 3G

Juan Jose Vega

student•

En el curso de JS profesional se aprende a manejar esto.

Cristian Andres Ladino Peña

student•

Excelente clase. Aunque normalmente no he visto dos spinners en una sola página. 🙂

Frank Antonio Piñin Ato

student•

A alguien mas le sale un error cuando regresas a usuarios y le das click en ver. pero luego refrescas la pestana y sale normal?

Carlos Olivares

student•

Hola. Se resuelve con el dispatch de CARGANDO, que se agrega en publicacionesActions

Grace Nikole Avarado

student•

Cuál es el error? A mí no me sale ninguno :c

Willy David Da Conceicao Lozada

student•

En el publicaciones actions hacemos primero un dispatch de cargando a publicacionesReducers, después intentamos traer las publicaciones del usuario en caso de éxito, hace dos dispatchs uno a publicacionesReducers mandándole el arreglo con las publicaciones del usuario que se están viendo y después hacemos el proximo dispatch al usuarioReducers diciendole en esta casilla están tus publicaciones,
En caso de error un dispatch a publicacionesReducers mandando un String con el error}

Conclusión: a las publicacionesActions las validamos con un try catch para manejar los estados de una petición HTTP haciendo dispachts depende la situación.

GEORGIE WLADIMIR DUARTE CADENAS

student•

yo no hice feeling con el proyecto y me esta costando un mundo prestarle atencion.. el curso anterior me parecio mas interesante el proyecto. Creo que practicare con otro proyecto

Wandy Rafael Santana Evangelista

student•

Hola @GeoD -Es mas por el feeling del profesor al momento de hacer todo el codigo que no es una manera adecuada, y al parecer no usa en su totalidad buenas practicas para su comprension y lectura. Por esta razon y otras el curso no parece muy apetitoso, pero te invito a terminar y hacer tu propio proyecto. Tambien puedes checar mi repositorio del proyecto, lo he realizado totalmente por mi cuenta usando buenas practicas: Click Aqui

Recuerda, #NuncaParesDeAprender 💚

Arnoldo Ricardo HR

student•

Wandy yo creo no usar buenas practicas es intencionado, para que conozcas mas a fondo la librería y el lenguaje

jean pierre gabriel nieto acosta

student•

No entiendo bien el por que, asumo que es porque el dispatch está antes de que declaremos el publicaciones_key y el usuarios_actializados. Pero la aplicación daba error al buscar el "Detalle" de una persona o sus publicaciones y luego ir a usuarios y hacer lo mismo 🤷‍♂️

Daniel Alberto Esquinazi

student•

Me parece que es porque quiere agregarle legibilidad. Pero no estoy seguro.

softdynamic sac

student•

Los usuarios dependen de las publicaciones en esta vista detalle, por eso las publicaciones deben estar disponibles primero para poder manejar al usuario que le corresponde.

Willy David Da Conceicao Lozada

student•

En caso que el usuario no tenga publicaciones este seria el condicional para mostrar que no tiene publicaciones cierto? lo puso en el ponerPublicaciones() que no retorna nada

		if (publicaciones.length === 0) return;

Eligreg López

student•

Me sale el error TypeError: Cannot read property 'map' of undefined

const { publicaciones_key } = usuarios[key]

        return publicaciones[publicaciones_key].map((publicacion) => (
            <div 
                className="pub_titulo"
                key={ publicacion.id }

David Dias

student•

Hola!. Revisa que arriba estés destructurando correctamente la variable a partir del reducer, si esta bien sigue revisando las declaraciones que se hacen mas arriba.

<const {
            usuariosReducer, 
            usuariosReducer: { usuarios },
            publicacionesReducer,
            publicacionesReducer: { publicaciones },
            match: { params: {key}}
        } = this.props;>

Emanuel Alejandro Mamani

student•

hola, a mi tambien me tiraba ese error, pero lo solucione asi if(publicaciones[publicacion_key]) { return publicaciones[publicacion_key].map(publicacion => ( <Publicacion key={publicacion.id} data={publicacion} /> )) } despues del const

Juan Felipe Salamanca Gonzalez

student•

No afecta en ningún aspecto que no pongamos el Loader en las publicaciones para que se vea como carga dos veces?

Willy David Da Conceicao Lozada

student•

yo diria que no solo si se tarda mucho la peticion se vera en blanco te recomiendo mejor hacer uno para los dos

Melissa González Nebrijo

student•

Cuando pongo el dispatch de cargando ya no me muestra las publicaciones, no sé porqué.

Juan Castro

teacher•

¿Podrías mostrarnos tu código? Así sin verlo es muy difícil adivinar qué estará causando el error y cómo podemos solucionarlo. :pray:

Andrés Felipe Eslava Zuluaga

student•

No es muy buena práctica que se vean dos spinners. Pero creo que el ejemplo acá está dirigido a demostrar que la información está completamente a parte: cuando se trae el usuario y las publicaciones a parte. · Este curso es confuso, pero vale la pena desde el punto de vista de cómo se aplican todos los conceptos. Recordemos que Redux son solo unas cuántas funciones, el resto, es un patrón de JS aplicado. Por eso se vuelve difícil

Paul Cortes

student•

Super, vamos avanzando

softdynamic sac

student•

Debe ser confuso para el usuario final ver 2 cargandos, considero que con uno para esa vista es suficiente, además, los mensajes de errores deberían ser generales para el usuario final como 'Sucedió algo inesperado.Inténtelo más tarde' en el Dom y detallados para el desarrollador como '404 error users no found' en consola.

Wilmer David Cedeño Mendoza

student•

Muy buena clase, se ve muy dinámico el programa

Johan García Trejo

student•

Debe ser confuso para el usuario final ver 2 cargandos, considero que con uno para esa vista es suficiente

Arnoldo Ricardo HR

student•

considero que esta es una mejor forma de poner las validaciones

ponerPublicaciones = () => {
        const {
            usuarioReducer,
            publicacionReducer,
            publicacionReducer: { publicaciones },
            match: {
                params: { key },
            },
        } = this.props;

        if (publicacionReducer.error || usuarioReducer.error) {
            return <Fatal mesaje={publicacionReducer.error} />;
        }

        if (!publicaciones.hasOwnProperty(key) || publicacionReducer.cargando) {
            return <Spinner />;
        }

        return publicaciones[key].map((publicacion) => (
            <div className="pub_titulo" key={publicacion.id}>
                <h3>{publicacion.title}</h3>
                <p>{publicacion.body}</p>
            </div>
        ));
    };

const { publicaciones_key } = usuarios[key]

        return publicaciones[publicaciones_key].map((publicacion) => (
            <div 
                className="pub_titulo"
                key={ publicacion.id }

<const {
            usuariosReducer, 
            usuariosReducer: { usuarios },
            publicacionesReducer,
            publicacionesReducer: { publicaciones },
            match: { params: {key}}
        } = this.props;>

ponerPublicaciones = () => {
        const {
            usuarioReducer,
            publicacionReducer,
            publicacionReducer: { publicaciones },
            match: {
                params: { key },
            },
        } = this.props;

        if (publicacionReducer.error || usuarioReducer.error) {
            return <Fatal mesaje={publicacionReducer.error} />;
        }

        if (!publicaciones.hasOwnProperty(key) || publicacionReducer.cargando) {
            return <Spinner />;
        }

        return publicaciones[key].map((publicacion) => (
            <div className="pub_titulo" key={publicacion.id}>
                <h3>{publicacion.title}</h3>
                <p>{publicacion.body}</p>
            </div>
        ));
    };

Validación de errores

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