PUT

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

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

1. 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.

2. 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.

3. 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.

4. 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.

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!

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.

hasta ahora el curso a estado un poco complejo

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

check

Concuerdo con que el curso ha sido muy duro

Que clase tan buena!

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 😄

Excelente clase 🙂

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

bueno casi me pierdo, estuvo interesante,

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
	})
}	

}

Excelente clase, con esta cada vez queda más claro el tema de la inmutabilidad

export const cambioCheckbox = (usu_id, tar_id) => (dispatch, getState) => {
	// console.log(new_task)
	const { tareas } = getState().tareasReducer
	const seleccionada = tareas[usu_id][tar_id]
	const actualizadas = {
		...tareas,
	}
	actualizadas[usu_id] = {
		...tareas[usu_id]
	}
	actualizadas[usu_id][tar_id] = {
		...tareas[usu_id][tar_id],
		completed: !seleccionada.completed
	}

	dispatch({
		type: ACTUALIZAR,
		payload: actualizadas
	})
}