Bienvenido al curso

1

Conoce a tu profesor y todo lo que aprenderás sobre Redux

2

¿Qué conocimientos me recomiendan para tomar este curso?

Repaso React

3

¿Qué es React y cómo funciona?

4

Preparando nuestro entorno de trabajo

5

Creación de la app con React

6

Agregando funciones a la app con React

7

Stateful vs Stateless

8

Ciclo de vida de React

9

Manejando promesas

10

React Router DOM

Introducción a Redux

11

¿Qúe es Redux, cuándo usarlo y por qué?

Fases de Redux

12

Introducción: las fases de Redux

13

Store

14

Reducers

15

Conexión a un componente

16

Action Creators

17

Redux Thunk

18

Explicación teórica: ciclo completo de Redux

19

Práctica: ciclo completo de Redux

Fases Extra

20

Archivos Types

21

Try Catch

22

Escenarios asíncronos

23

Componente Spinner

24

Componente Fatal

25

Tabla como componente

Compartir información en Redux

26

Introducción Compartir información en Redux

27

Parámetros por URL

28

Compartir Reducer

29

Múltiples Reducers

30

Llamando a múltiples reducers en una acción

31

Uso del estado en la acción

32

Evitar segundas búsquedas

33

Inmutabilidad

34

Evitar sobrescritura

35

Validación compuesta

36

Validación de errores

37

Modificando respuesta de url

38

Estado con interacción

39

Mostrar componentes dinámicamente

40

Llamadas asincronas dinámicas

41

Props por herencia vs estado

42

Estado compartido

Métodos HTTP

43

Introducción a métodos HTTP

44

Nuevo ciclo Redux

45

Normalizar datos

46

Mapear Objetos

47

Componente para agregar tarea

48

Manejar inputs con Reducer

49

POST

50

Deshabilitando botón

51

Redireccionar

52

Reutilizar componentes

53

PUT

54

DELETE

55

Últimos detalles

Conclusión

56

Conocimientos adquiridos

57

Qué hacer a continuación

Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Curso de Redux por Bedu

Curso de Redux por Bedu

Rodolfo Saldivar

Rodolfo Saldivar

PUT

53/57
Recursos

Aportes 16

Preguntas 6

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

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