PUT

Clase 53 de 57 • Curso de Redux por Bedu

Clase anteriorSiguiente clase

Camilo Rivera Quintero

student•

este curso ha sido duro, ha sido satisfactorio llegar a este punto.

Willy David Da Conceicao Lozada

student•

Aquí apuntes para todo el mundo, nivel Thanos, apto para todo el mundo, no solo genios xD .

Terminamos el action de editar que recibe por parámetro un objeto con la info a modificar de una tarea, que se mandara a la API para que la API la modifique mediante el método PUT.
Modifico los checkbox para que queden seleccionados en el tareas/index, cuando ocurra un cambio en el checkbox llama al actions cambioCheck() y le pasamos el id del usuario y el id de la tarea que pincho.
Creo el actions cambioCheck() recibe el usu_id y la tar_id destructuro las tareas del tareasReducer, guardo en variable la tarea seleccionada, en especifico y hago un objeto de inmutabilidad que será igual a todas las tareas pero a la tarea que se pincho en el checkbox el valor del completed será el contrario.
Por ultimo hago un dispatch mandando en especifico, un objeto con todas las tareas pero a la tarea que se le dio click le modifico el completed

Conclusión: termine el action de editar que ejecuta la petición de tipo PUT mandando la tarea modificada a un endpoint en especifico y a los checkboxs cuando ocurra un cambio llama a su actions que modifica el completed de la tarea que le dio click.

Erick Ruiz Vazquez

student•

Gracias por tus apuntes son de mucha ayuda.

ANTHONY JEAMPIER RANGEL RODRIGUEZ

student•

Gracias!

Irungaray Agustin

student•

Sí señor, un curso bien exigente. En un momento el código se puso demasiado enredado pero en este módulo se comprendió mejor. Un grande este profesor, se nota que tiene mucho conocimiento!

Nery Alberto Cano Ortigoza

student•

woow en esta clase explico un tema que se viene arrastrando desde las primeras, por que escribe de forma tan confusa en los actions esto me aclaro mucho el panorama. Pero creo que se debio de explicar en la clase de inmutabilidad, para no estar con esta duda tanto tiempo.

Johan García Trejo

student•

hasta ahora el curso a estado un poco complejo

Paul Cortes

student•

En este video explican el porque de la necesidad de bjara en los niveles de la informacion para la inmutabilidad que hay en la documentacion en el enlace que el profesor recomeinda leer, video explicando la inmutabilidad en javascript

Carlos David Ramírez Gómez

student•

Buen vídeo, super recomendado

David Dias

student•

Esta muy bueno el video

Daniel Lopez

student•

aun no tengo muy claro el concepto del getState(). ¿es un almacenamiento general por decirlo asi?...

Erika Luna

teacher•

getState() si es un método de almacenamiento.

Algunos otros métodos son:

getState()
dispatch(action)
subscribe(listener)
replaceReducer(nextReducer)

Platzi Team

student•

Daniel, puedes hacer la analogía del state con un addEventListener general, y en el que también puedes especificar qué quieres "escuchar" y almacenar, para luego manipular según necesites hacerlo. El método getState, te permite obtener (get) el estado de tu aplicación.

Melissa González Nebrijo

student•

check

Andrés Felipe Eslava Zuluaga

student•

jaja

Frank Antonio Piñin Ato

student•

Concuerdo con que el curso ha sido muy duro

Diego Fernando Rojas Quintero

student•

Alguien me puede recomendar que APIS se puedan trabajar con los métodos HTTP

Luis Lira

student•

Hola! Yo tengo un API en Heroku sobre un juego llamado League of Legends jeje como es la versión gratis tarda un poco en levantarse luego de un rato que no se usa, https://api-lol.herokuapp.com/ también hice un apartado con documentación :D

Gerson Montenegro

student•

axios no solo te resuelve el tema de la gestión de errores más cómodamente que si lo hicieras a mano, sino que también te permite trabajar con todos los métodos HTTP

Willy David Da Conceicao Lozada

student•

me surge la siguiente respuesta? los checkbox no tenia que hacer otra petición de tipo put para que se actualizara ese valor en la API y no solo en el estado local porque cuando se recarga la pagina ya ese valor cambia. no?

Santiago Ortiz Ceballos

student•

Que librería suele usarse para mejorar este proceso?

Nilson Diaz

student•

Si te referies al tema de inmutabilidad , no creo que sea comun el uso de una libreria para eso , puesto que javascript con su spread operator ya lo hace bastante facil , de igual forma esta que esta diseñado para este fin

Luis Gerardo López Hernández

student•

si es de editar no se usaría mejor patch en lugar de put?

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

student•

En este caso como el recurso se va a actualizarpor completo se utiliza PUT para el caso de actualizaciones parciales se usa PATCH

Andrés Felipe Eslava Zuluaga

student•

Que clase tan buena!

Felipe Salamanca Gonzalez

student•

Excelente clase, todo claro y se va notando el conocimiento de las clases pasadas ya que puedo entender y solucionar errores que me han surgido solo :D

Cristian Andres Ladino Peña

student•

Excelente clase 🙂

Manuel Rivera

student•

Cuáles librerías para inmutabilidad recomiendan ? No conozco ninguna

Gabriel De Andrade

student•

o Mori, te recomiendo esta lectura también: Estructuras de Datos Inmutables :D

Jorge Alexander Salcedo Alvarez

student•

bueno casi me pierdo, estuvo interesante,

JAIME URQUIZU

student•

Pues a ver si puedes encontrarme a mí.... Ando más perdido que un Hacker en un museo de typewriters de los 50'.

softdynamic sac

student•

really?

softdynamic sac

student•

En mi caso, lo manejé en un mismo action.

Save.js

const Save = ({ match: {params}, loading, error, task, tasks, onUpdateForm, onSave }) => {
	const [goback, setGoback] = React.useState(false);
	const [selected, setSelected] = React.useState(false);

	React.useEffect( () => {
		
		if (Array.isArray(tasks)) {
			if(!selected) {
				const { uId, tId } = params;
				const xx = tasks.reduce((selected, task) => {
					if (!selected && task.userId == uId && task.id == tId) {
						selected = task;
					}
					return selected
				}, null);
				setSelected(xx);
			} else if (selected) {
				
				onUpdateForm({
					target: {
						name: 'userId',
						value: selected.userId
					}
				});

				onUpdateForm({
					target: {
						name: 'title',
						value: selected.title
					}
				});
		
			}			
		}
		
	}, [params, tasks, selected, onUpdateForm]);

	const _save = async () =>{
		const payload = {
			...selected,
			...task,
			completed: selected ? selected.completed : false
		}
		
		onSave(payload, setGoback);
		
	}```


tasksActions.js

export const onSave = (payload, setGoback) => async (dispatch) => { dispatch({ type: LOADING })

try {
	if (payload.id){
		await axios.put(`https://jsonplaceholder.typicode.com/todos/${payload.id}`, payload)
	} else {
		await axios.post("https://jsonplaceholder.typicode.com/todos", payload)
	}		
	dispatch({
		type: SAVE_FORM
	})

	setGoback.call(null, true);
			
} catch (e) {
	dispatch({
		type: ERROR,
		payload: e
	})
}

}

Daniel Cutipa

student•

Alguien sabe como mantener esos datos cuando hago un refresh, sin volver a hacer la llamada a la url ?

porque esos datos estan activos mientras no se haga refresh de la pagina, si hago refresh se vacian esos datos

espero puedan ayudarme como lo harian ustedes

Diego Mario Maldini Freyre

student•

Hola! Creo que la respuesta a tu consulta está bien explicada aquí: https://platzi.com/clases/1613-redux/20667-evitar-segundas-busquedas/

Daniel Cutipa

student•

en realidad, creo que se tendria que guardar en storage para no perder los datos

PUT

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