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

No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Curso de Redux por Bedu

Curso de Redux por Bedu

Rodolfo Saldivar

Rodolfo Saldivar

POST

49/57
Recursos

Aportes 19

Preguntas 2

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Reg铆strate o inicia sesi贸n para participar.

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

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?

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

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

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

Este curso me hizo acordar lo que dijo un profesor en el curso profesional de Javascript. 鈥淐uando 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.

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

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.'
        });
    }
};

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

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

Esta clase estuvo interesante.

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!

Excelente clase. 馃檪

un buena clase

Excelente clase

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: 鈥榓gregada鈥
})
} catch (error) {
console.log(error.message)
dispatch({
type: ERROR,
payload: 鈥業nt茅ntelo m谩s tarde.鈥
})
}
}```

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

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

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

	}
}```

excelente clase