POST

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

Luis Lira

student•

Para los que no usan Axiox (como yo), les dejo la form para hacerlo con fetch

const data = await fetch("https://jsonplaceholder.typicode.com/todos",
        { 
            method: 'POST', 
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(newTask)
        }
    ).then(response => response.json())

Cristian Blandon

student•

¿Por qué no usas Axios?

Fabian Ezequiel Falón

student•

Consulta @RodolfoSaldivar, No es mejor en lugar de hacer un nuevo GET para traer todas las tareas concatenar a las tareas que tenemos en el store la tarea que nos devuelve el metodo post?

Rodolfo Saldivar

teacher•

Sí, esa es otra manera de hacerlo; y sí, puede ser mejor.

Brayan Mateo Montañez Baron

student•

Quizas en este caso no porque ya esta el action getTodos que trae de la api

Willy David Da Conceicao Lozada

student•

Al componente Guardar.js le agregamos al botón de guardar un evento onClick que este evento llama al actions creator agregar(nueva_tarea) mandándole por parámetro un objeto con los valores de la nuevas tarea que se enviara a la API.
Creamos el actions agregar() que recibe por parámetro el objeto con la info de la nueva tarea que se enviara a la API, hacemos la petición de tipo POST con axios a la url y mandándole como segundo parámetro el objeto que voy a agregar a la API y me retorna la respuesta de la peticion en respuesta.data el nuevo campo que se agrego.
Justo después de la petición ejecuto un dispatch de tipo agregada, en el reducer creo ese caso que retona el estado y las tareas vacío porque ya no están las mismas tareas se puso una nueva

Conclusión: cuando se de click al botón guardar llama al action agregar() que ejecuta la petición de tipo post a la API y como segundo parámetro el objeto que voy a agregar a la API, es decir la nueva tarea a algún usuario.

Byron Vargas

student•

Muy buenos días a todos, ojala me puedan echar una mano con esto

Estoy tratando de realizar la clase pero tengo esta respuesta de error en consola: Access to XMLHttpRequest at 'https://jsonplaceholder.typicode.com/todos' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. tareasActions.js:77 Network Error

acá esta el axios.post:

estoy con Visual Studio Code por si ayuda en algo el dato

Gracias de antemano

Edgar Isai Salgado Cortez

student•

Me pasa exactamente lo mismo, no encuentro manera de corregir el error

Santiago Botero Ruiz

student•

Este curso me hizo acordar lo que dijo un profesor en el curso profesional de Javascript. "Cuando la única herramienta que tienes es un martillo, todo problema comienza a parecerse a un clavo".

Como en este curso se quiere enseñar a usar Redux, todo lo están haciendo con Redux. Concuerdo con que Redux es una gran herramienta, ayuda un montón, pero está en nosotros cuando es mejor usarlo y cuando no.

David Lara

student•

mi Cabeza desbloqueo una gran parte de hueco de teorias, excelente

David Chinchin

student•

Existe algún problema si se hace de la siguiente manera o no es una buena practica

export const agregar = () => async (dispatch, getState) => {
    dispatch({
        type: CARGANDO
    });
    const { usuario_id, titulo} = getState().tareasReducer;
    const nuevaTarea = {
        userId: usuario_id,
        title: titulo,
        completed: false
    };
    try
    {
        const respuesta = await axios.post('https://jsonplaceholder.typicode.com/todos', nuevaTarea);
        console.log(respuesta.data);
        dispatch({
            type: 'agregada'
        });
    } catch (err) {
        console.log(err.message);
        dispatch({
            type: ERROR,
            payload: 'Intente mas tarde.'
        });
    }
};

Federico Guillermo Moreira Tejera

student•

Al no utilizar base de dato, de donde surgen los ID autogenerados?. Donde quedan almacenados los datos?

Andres Roberto Coello Goyes

student•

No se almacenan en ningun sitio, JsonPlaceholder te muestra una simulación con el metodo POST, si esta todo correcto en el envio de los valores entonces te retorna un id , este puede ser generico o random, en realidad no importa son solo pruebas

Federico Guillermo Moreira Tejera

student•

Muchas Gracias

Juan Felipe Salamanca Gonzalez

student•

jsonplaceholder se encarga de crear una simulacion de un POST correcto ya que no estamos trabajando con una base de datos como tal, generando un id a la tarea cuando la guardamos

Frank Antonio Piñin Ato

student•

Esta clase estuvo interesante.

JAIME URQUIZU

student•

Cuando le doy a guardar me sale:

http://localhost:3000/tareas/guardar?

y no me aparece el objeto nueva_tarea en la consola.

¿¿Alguna idea?? He revisado el código 3 veces y no me aparece tampoco error en la consola que me lo explique.

Código:

export const agregar = nueva_tarea => async dispatch => {
  // console.log(nueva_tarea)
  dispatch({
    type: CARGANDO
  })

  try {
      const respuesta = await axios.post(
      'https://jsonplaceholder.typicode.com/todos',
      nueva_tarea)
      console.log(respuesta.data)
      dispatch({
        type: 'agregada'
      })
  } catch (error) {
    console.log(error.message)
    dispatch({
      type: ERROR,
      payload: 'Inténtelo más tarde.'
    })
  }
}```

JAIME URQUIZU

student•

Está comentado después de ver que no salía, porque en el curso lo omiten y lo borran, pero no sale.

JAIME URQUIZU

student•

Vale, tras dos horas solucionado. Era el ‘bootstrap’. Si utilizaba sus clases y un ‘form’, y dentro estaba el botón, no había preventDefault y saltaba el submit directamente sin hacer caso de las funciones. Resuelto.

Andrés Felipe Eslava Zuluaga

student•

Quizá tuvo que haber explicado todo éste módulo de primero, pues la forma en que ahora lleva el curso de todos es muuucho mejor que el primer módulo... El profeso es sin dudas muy bueno y el contenido de clase es sin dudas mucho mejor! Excelente clasE!

Cristian Andres Ladino Peña

student•

Excelente clase. 🙂

Johan García Trejo

student•

un buena clase

Grace Nikole Avarado

student•

La URL de las tareas:

Edith Hernández Navarrete

student•

Excelente clase

JAIME URQUIZU

student•

Me sale esto en cuando le doy a guardar:

http://localhost:3000/tareas/guardar?```

¿Alguna idea de por qué?

Mi código: export const agregar = nueva_tarea => async dispatch => { // console.log(nueva_tarea) dispatch({ type: CARGANDO })

try { const respuesta = await axios.post( 'https://jsonplaceholder.typicode.com/todos', nueva_tarea) console.log(respuesta.data) dispatch({ type: 'agregada' }) } catch (error) { console.log(error.message) dispatch({ type: ERROR, payload: 'Inténtelo más tarde.' }) } }```

Eduardo Luis Gonzalez Raveli

student•

No coloques el input y el botón dentro de un form, ya que el form al detectar el click en el botón intentará enviar el formulario, o maneja el evento onSubmit y colocas un event.preventdefault()

Luis Martinez

student•

Un boton dentro de un formulario toma type='submit' por defecto, puedes cambiar su tipo a type='button' para evitar que mande el formulario y sólo se comporte cómo un botonsito

Fabian Guerrero

student•

Hola, al intentar hacer la peticion POST del request ilustrado en el video me sale un problema de CORS policy, no se que headers tendria que agregar a la peticion, si alguno le ha salido este problema favor notificar para seguir con el curso.

Gracias

Samar Jaffal

student•

Hola, a mi me pasaba el mismo error por dos razones: 1- Internet deficiente. 2- La página de jsonplaceholder se caía.

Luego de eso funcionó normalmente. Saludos.

Carlos David Ramírez Gómez

student•

En mi experiencia el CORS es un bloqueo que realiza el servidor a peticiones de terceros, y eso debe cambiarse en el backend para que el frontend pueda realizar sus peticiones, sin embargo hay sitios que tienen habilitado el CORS y no funciona, por lo que te recomiendo que para que hagas esas pruebas utilices una extensión de Chrome que habilita el CORS

Stiven Jiménez

student•

Aquí les dejo el Url de las tareas https://jsonplaceholder.typicode.com/todos

Edgar Lopez Arroyo

student•

export const agregar = (new_task) => async (dispatch) => {
	// console.log(new_task)
	dispatch({
		type: CARGANDO
	})

	try {
		const respuesta = await axios.post('https://jsonplaceholder.typicode.com/todos', new_task)
		console.log(respuesta)
		dispatch({
			type: 'agregada'
		})
	} catch(error){
		console.log(error.message)
		dispatch({
			type: ERROR,
			payload: 'Intentelo mucho mas tarde'
		})

	}
}```

const data = await fetch("https://jsonplaceholder.typicode.com/todos",
        { 
            method: 'POST', 
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(newTask)
        }
    ).then(response => response.json())

export const agregar = () => async (dispatch, getState) => {
    dispatch({
        type: CARGANDO
    });
    const { usuario_id, titulo} = getState().tareasReducer;
    const nuevaTarea = {
        userId: usuario_id,
        title: titulo,
        completed: false
    };
    try
    {
        const respuesta = await axios.post('https://jsonplaceholder.typicode.com/todos', nuevaTarea);
        console.log(respuesta.data);
        dispatch({
            type: 'agregada'
        });
    } catch (err) {
        console.log(err.message);
        dispatch({
            type: ERROR,
            payload: 'Intente mas tarde.'
        });
    }
};

export const agregar = nueva_tarea => async dispatch => {
  // console.log(nueva_tarea)
  dispatch({
    type: CARGANDO
  })

  try {
      const respuesta = await axios.post(
      'https://jsonplaceholder.typicode.com/todos',
      nueva_tarea)
      console.log(respuesta.data)
      dispatch({
        type: 'agregada'
      })
  } catch (error) {
    console.log(error.message)
    dispatch({
      type: ERROR,
      payload: 'Inténtelo más tarde.'
    })
  }
}```

export const agregar = (new_task) => async (dispatch) => {
	// console.log(new_task)
	dispatch({
		type: CARGANDO
	})

	try {
		const respuesta = await axios.post('https://jsonplaceholder.typicode.com/todos', new_task)
		console.log(respuesta)
		dispatch({
			type: 'agregada'
		})
	} catch(error){
		console.log(error.message)
		dispatch({
			type: ERROR,
			payload: 'Intentelo mucho mas tarde'
		})

	}
}```

POST

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