Llamadas asincronas dinámicas

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

Valentino Manrrique

student•

https://jsonplaceholder.typicode.com/comments?postId=${selecionada.id}

Ulises Rojas González

student•

Cuidado, dice 'selecionada.id', es 'seleccionada.id', jeje.

Stiven Jiménez

student•

en el minuto 4:28 el profe hace un console.log automático esto es gracias a una extensión de vscode se las dejo por si les interesa https://marketplace.visualstudio.com/items?itemName=dotcypress.console-log

David Dias

student•

Muchas gracias por el aporte

Willy David Da Conceicao Lozada

student•

Terminamos el actions traerComentarios() que va a buscar los comentarios de la publicacion que se le dio click. Y este retorna todas las publicaciones pero modifica el atributo comentarios de la publicación que se le dio CLICK
En el componente validamos si todavía no están los comentarios en el estado llamamos al actions creators para traer los comentarios de esta publicación y si ya están no los busques

Conclusión: Terminamos el actions traerComentarios() que va a buscar los comentarios de la publicación que se le dio click. Y este retorna todas las publicaciones pero modifica el atributo comentarios de la publicación que se le dio CLICK

Javier A. Imbachi M

student•

Yo siempre teniendo en cuenta tu punto de vista :) tk

Johan García Trejo

student•

Si se practica se entiende

Claudio Igor Camejo Abreu

student•

Tengo una duda con estas tres lineas:

 const publicaciones_actualizadas = [...publicaciones];

  publicaciones_actualizadas[pub_key] = [...publicaciones[pub_key]];

  publicaciones_actualizadas[pub_key][com_key] = actualizada;

Explico lo que entiendo, la primera linea para lograr la inmutabilidad estamos creando un nuevo array con las publicaciones. En la tercera linea estamos actualizando la publicacion seleccionada con lo actualiado.

Pero para que sirve la segunda linea, esto no lo hace ya la primera? (segun entiendo yo la segunda linea lo que hace es actualizar una publicacion especifica, pero esto lo hace ya la primera al actualizar todo).

Hacer la prueba de lo que digo si en vuestro codigo comentan la segunda linea, todo funciona tal cual.

Diego Andres Cabrera Rojas

student•

efectivamente , no esta haciendo practicamente nada ,se puede quitar , creo que el profe se confundio un poco en esta linea , seguramente la penso diferente y no se dio cuenta que practicamente ya lo habia hecho

Andrés Felipe Eslava Zuluaga

student•

La segunda línea expresa la información actualizada que debe guardarse en la publicación (div del título) que le dimos click. Explico,

el evento que desencadenó darle click es actualizar si está abierto o cerrado & traer los comentarios.

Cómo estamos yendo a una publicación en específico, en publicaciones actualizadas, la información que le pasamos es el objeto actualizado, en el key que dimos click (la entrada). Es un poco enredado, pero ponle debugger y vas a verlo mejor detenidamente

Stiven Jiménez

student•

Aqui les dejo el enlace de los comentarios https://jsonplaceholder.typicode.com/comments?postId=1

https://jsonplaceholder.typicode.com/comments?postId=${seleccionada.id}

Brayan Mateo Montañez Baron

student•

No seria mejor ejecutar un solo action que abra o cierre y además que traiga los comentarios? Mejor dicho, un solo Action en vez de los dos

Oyarzabal Ivan

student•

Es correcto, lo que propones seria lo mas optimo, el profe lo esta haciendo por partes para que se entienda solamente

Andrés Felipe Eslava Zuluaga

student•

En vista que estamos haciendo uso de Redux y los ejemplos son complejos, pero se ven en la proyectos de vida real, el profesor sugiere un manejo más complejo. · Procura verlo cómo un reto de alguien que quiere escalar su App y vas a darle una complejidad de por qué hacer todo así cómo el profesor.

Tú puedes

Frank Antonio Piñin Ato

student•

Mientras mas practica mas se entiende.

Paul Cortes

student•

Excelente muy genial la clase

Eddson Blanco

student•

++AYUDAAAAA!!!!! ++ me da este error . this.props.showUpComments is not a function, Cuando quito el AbrirCerrar y coloco esa nueva function me da ese error agregare unas capturas para que vean necesito ayuda tengo dias tratando de solucionar!

Abraham Sanchez

student•

Lo que estoy viendo es que showUpComments no es una funcion que vienen de los props como lo estas indicando sino que es un metodo hermano de newMethod. Lo que realmente necesitas hacer para llamarlo es this.showUpComments en vez de this.props.showUpComments.

Rafael Alberto Molano Castrillón

company_admin•

En el control de peticiones me surge la siguiente duda, si siempre estoy preguntando si ya tengo comentarios, no me haga la petición otra vez. ¿Que pasa si los datos ya variaron?, es decir.. en la primera petición obtuve 5 registros, ahora ya cambiaron los datos en el orígen y debería entregar por ejemplo 10 registros.

Sergio Alejandro Trejo Cuxim

student•

Bueno, tendrías tu que controlar esa parte, es decir, pudieras dar la opción de recargar la lista de usuarios de nuevo, simplemente llamando a la misma función, otra es que compares la longitud de los items y los compares con el anterior, si tiene más o tiene menos entonces renderizas

Juan Felipe Salamanca Gonzalez

student•

Esta clase fue mas entendible que la anterior, es muy importante practicar y practicar ademas ¿Quisiera saber si axios solo puede obtener datos de alguna base de datos web o puede también ser una local?

Juan Castro

teacher•

Con Axios o cualquier otra herramienta del frontend solo puedes acceder a APIs, no a bases de datos. Para esto último debes buscar las herramientas especificas de la base de datos que quieres consultar.

Willy David Da Conceicao Lozada

student•

amigo axios en pocas palabras es una librería para realizar peticiones HTTP, hay varias peticiones HTTP y se le conocen como verbos HTTP aqui puedes ver mas, y uno realiza las peticiones a un API que tienen endpoints y cuando tu realizas la petición a un endpoint la api se encarga que hacer con esa petición, si modificar la base de datos, si entregarte datos, si modificar algo... espero sea de tu ayuda xD

Andrés Felipe Eslava Zuluaga

student•

Se entiende un poco mejor que la clase anterior, sin embargo, recomiendo usar un debugger para ver un paso a paso de cada cosa del código. · Redux es complejo. Pero vamos que sí podemos

Fabian Ezequiel Falón

student•

@RodolfoSaldivar en el caso de que se cree un comentario nuevo no se mostraría hasta recarga la pagina no? ya que con la validacion, al tener comentarios no hace de nuevo el get.

Rodolfo Saldivar

teacher•

Si, es como lo pusiste. En este caso no estamos preparando la aplicación para que funcione en tiempo real; entonces sí, si alguien sube un comentario en otra computadora, hasta que le demos recargar se vera en pantalla.

Luis Carlos Zabala

student•

@RodolfoSaldivar, para ese caso, que opción se tiene para que funcione de ese modo? Que la aplicación esté consultando constantemente para traer nuevos comentarios o publicaciones o usuarios.

Saludos

Grace Nikole Avarado

student•

En este video se entiende mucho mejor :3

Cristian Andres Ladino Peña

student•

Excelente clase. 🙂

cristian stiven velasquez garzon

student•

excelente clase

Llamadas asincronas dinámicas

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