DELETE

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

Willy David Da Conceicao Lozada

student•

Apuntes nivel nasa, explicación paso a paso, videotutorial explicado para bebes pero en texto, xD .

Cuando hagan click al botón de eliminar llama a un actions llamado eliminar que elimina la tarea que se le dio click, ejecuta la peticion de tipo delete al endpoint en especifico de la tarea Y después llama a un actions de tipo TRAER_TODAS Y le mandamos un objeto vacio para que las tareas vuelvan a cargar.
En el componente tareas/index creamos un componentDidUpdate() que llama a las tareas

. Conclusión: cuando den click al botón de eliminar ejecutamos una petición al endpoint de tipo DELETE y cuando se actualice el componente llamamos nuevamente las tareas, porque eliminamos una tarea 😥.

ANTHONY JEAMPIER RANGEL RODRIGUEZ

student•

Gracias de nuevo! Tus aportes son de mucha ayuda!

Luis Lira

student•

Así con fetch

const data = await fetch(`https://jsonplaceholder.typicode.com/todos/${taskId}`, { method: 'DELETE' } )```

Alejandro Maimus

student•

Que significan los 3 acentos invertidos al final del código ? Saludos!

Luis Lira

student•

@alejandromaimus se llaman template literal, es para que en una cadena de texto puedas agregar una variable o algo más de JavaScript como funciones de una manera más legible. En vez usar el signo +.

Por ejemplo:

const text = "texto" 

// Esta es la forma común pero si es muy grande se hace ilegible
console.log("Esto es una cadena de " + texto) 

// Esta es la forma con template literal, de forma que queda más legible el código. Y para usar la variable u otro código, primero debes "escaparla", eso se hace agregando ${ }.
console.log(`Esto es una cadena de ${texto}`)

Edgar Lopez Arroyo

student•

export const eliminar = (tar_id) => async (dispatch) => {
	dispatch({
		type: CARGANDO
	})

	try {
		const respuesta = await axios.delete(`https://jsonplaceholder.typicode.com/todos/${tar_id}`)
		console.log(respuesta)
		dispatch({
			type: TRAER_TODAS,
			payload: {}
		})
	} catch(error) {
		console.log(error.message)
		dispatch({
			type: ERROR,
			payload: 'Servicio no disponible'
		})
	}
}```

Miguel Sanchez

student•

No entendí cuando dijiste que era una url de prueba entonces si los quisiera eliminar o agregar resultados de verdad tengo que usar una base de datos

Alejandro Maimus

student•

Correcto, jsonplaceholder lo que puede hacer es devolverte un objeto que te diga si se eliminó, editó, o agregó correctamente un registro pero es una simulación.

Ivan Santiago

student•

Si lo notas cuando mandamos el get, put, delete, post no se actualizan los datos. Esto se debe a que la api que estamos usando (jsonplaceholder) no es una base de datos, por lo que no podemos afectarlos directamente. . Si tuviéramos una base de datos real, podríamos editarla y los cambios se verían, no solo en el state, como estamos haciendo aquí. 😎

Frank Antonio Piñin Ato

student•

Se me hace un poco confuso eso de que elimina pero no elimina creo que se debio trabajar con una base de datos real para ver los cambios.

Alvaro Garracini

student•

Lo que hace es emular una eliminación. Como los datos son de prueba y no hay base de datos, los insert, update y delete que se le hagan a los datos no se reflejan.

Johan García Trejo

student•

Lo que hace es emular una eliminación.

Andrés Felipe Eslava Zuluaga

student•

Muy buena clase. Casi finalizando este curso

Augusto Gonzalez

student•

Tengo un problema al usar el ComponentDidUpdate. Cuando coloco el condicional me aparece este error:

` Unhandled Rejection (Error): Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.

Harold López Ancar

student•

Tuve el mismo error. Se estaba generando un ciclo infinito de actualizaciones de estado ya que al obtener tareas modificamos la prop que muestra el spinner y el componentDidUpdate vuelve a llamarse y este vuelve a llamar al obtener tareas.

Yo lo controle condicionando que si esta actualmente cargando no vuelva a buscar las tareas.

componentDidUpdate() {
    const { loadingTasks, tasks } = this.props.tasksReducer;

    if (!loadingTasks &amp;&amp; !Object.keys(tasks).length) {
      this.props.getTasks();
    }
  }

Kenneth Angulo L

student•

Relacionado con este error, me paso algo similar, en este aso estoy usando componentes funcionales, lo solucione asi, para evitar las miltiples recargas:

    useEffect( ()=>{
        // Si ya traje tareas no hay que volver a traerlas
        if (!Object.keys(props.tasks).length) {
            props.fetchTasks();
        }
    },[props.tasks] );

Oyarzabal Ivan

student•

Cuando uno hace un "DELETE" deberia de retornar un "204_NO_CONTENT" porque borras algo, asique no hay nada que regresar

Juan Felipe Salamanca Gonzalez

student•

Excelente, a seguir practicando y mejorando para poder concluir con el curso

Cristian Andres Ladino Peña

student•

Excelente clase. 🙂 A seguir practicando y mejorando para comprender a fondo todos los conceptos vistos.

Edith Hernández Navarrete

student•

Excelente clase!

Paul Cortes

student•

Excelente clase

Brayan Mateo Montañez Baron

student•

Excelente como esta concluyendo este curso

const text = "texto" 

// Esta es la forma común pero si es muy grande se hace ilegible
console.log("Esto es una cadena de " + texto) 

// Esta es la forma con template literal, de forma que queda más legible el código. Y para usar la variable u otro código, primero debes "escaparla", eso se hace agregando ${ }.
console.log(`Esto es una cadena de ${texto}`)

export const eliminar = (tar_id) => async (dispatch) => {
	dispatch({
		type: CARGANDO
	})

	try {
		const respuesta = await axios.delete(`https://jsonplaceholder.typicode.com/todos/${tar_id}`)
		console.log(respuesta)
		dispatch({
			type: TRAER_TODAS,
			payload: {}
		})
	} catch(error) {
		console.log(error.message)
		dispatch({
			type: ERROR,
			payload: 'Servicio no disponible'
		})
	}
}```

DELETE

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