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
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
Aún no tienes acceso a esta clase
Crea una cuenta y continúa viendo este curso
Aportes 13
Preguntas 3
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
Excelente clase. Aunque normalmente no he visto dos spinners en una sola página. 🙂
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?
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.
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
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 🤷♂️
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 }
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
Super, vamos avanzando
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.
Muy buena clase, se ve muy dinámico el programa
Debe ser confuso para el usuario final ver 2 cargandos, considero que con uno para esa vista es suficiente
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}>
<h2>{publicacion.title}</h2>
<p>{publicacion.body}</p>
</div>
));
};
¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.