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

Normalizar datos

45/57
Recursos

Aportes 32

Preguntas 4

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesi贸n.

Ya habia usado el metodo 鈥渕ap鈥 de los array, pero ahora lo entiendo mucho mas, casi que le digo 鈥渉ola, adios鈥 a los for para iterar arreglos 馃槃

const tareas = {};
        respuesta.data.map( (tar) => (
            tareas[tar.userId] = {
                ...tareas[tar.userId],
                [tar.id]: {
                    ...tar
                }
            }
        ));

se lo hace de esta forma por que el json que consumimos de JSONPLACEHOLDER esta en un solo arreglo y tenemos que separarlo.

si tu mismo creas la API puede que sea muy diferente pero de todas formas se aprende cosas que jamas vii

Conclusi贸n: creamos un objeto llamado tareas que Acomoda en un objeto con id del usuario, las tareas que le corresponden a este usuario y despu茅s hago un dispatch mandando ese objetos con las tareas al reducerTareas

ok tengo que ver el JavaScript por Bedu. URGENTE

El curso es como Dark, llega un punto que se vuelve todo confuso pero al final se va aclarando

Con su explicaci贸n quedo clarisimo

excelente!!! en esta el profe si explico perfectamente y con mas detalle, ojala siempre fuese as铆 por favor! habemos personas q no somos tan inteligentes xD

Interesante. Intent茅 entenderlo por mi mismo y no pude
Pero ya con la explicaci贸n del profesor, qued贸 todo claro

Es posible hacer esto con el m茅todo reduce?

Bastante claro la verdad.

A ver si entend铆:
Agarras la respuesta que nos devuelve response.data y, como es un arreglo, lo mapeas para poder modificar dicha respuesta a la estructura que sigue la clase.

Entonces, En tu c贸digo creas objeto todos, que va a tener la informaci贸n recibida en response, pero con los datos normalizados para el prop贸sito de la clase, del proyecto.

const API_URL = "https://jsonplaceholder.typicode.com/todos";
const response = await axios.get(API_URL); // realizamos el llamado a la API para traer los todos

const todos = {};

La respuesta se requiere modificar ya que los datos se van a normalizar. El objetivo principal de esta t茅cnica es asociar formas similares a los mismos datos en una 煤nica forma de datos.

response.data.map(
	(todo) => (
		...
	)
)

Vas a agregar todo lo que trajo response.data a tus todos, pero en la estructura del proyecto.

  1. Al objeto todos le vas a agregar una posici贸n todo.userId - que la extraemos de data - para separar todo por el id del usuario.
  2. Dentro de cada id del usuario vas a desestructurar las tareas de ese usuario, y seguidamente, dentro de ese usuario, vas a agregar la posici贸n del id de cada todo.
  3. Finalmente, dentro de cada id, de cada todo, de cada usuario, vas a agregar la respuesta todo de cuando mapeas el arreglo response.data, o sea, cada todo del arreglo response.data.
response.data.map(
    response.data.map(
        (todo) =>
          (todos[todo.userId] = {
            ...todos[todo.userId],
            [todo.id]: {
              ...todo,
            },
          }
    )
);

Se puede entender m谩s de forma visual c贸mo queda tu objeto resultante si lo pasas por un console.log()

Esta clase me ense帽贸 que tengo que repasar mi l贸gica de programaci贸n

Normalizar datos

en tareasActions.js:

const respuesta = await axios.get('https://jsonplaceholder.typicode.com/todos');

const tareas = {};
respuesta.data.map((task) => (
  tareas[task.userId] = { //* Al objeto vac铆o de tareas le agregamos un atributo, el task.userId
    ...tareas[task.userId], //*Lo hacemos inmutable
    [task.id]: {
      ...task
    }
  }
));

Excelente clase. Entend铆 mejor para que era la funci贸n de obtener las tareas. 馃檪

que buena clase!!!

excelente explicacion de normalizacion de datos!

Que crack. Excelente curso

Excelente Curso鈥 Soy capaz de identificar errores y solucionarlos (Y) +10

En este caso las clases se estan volviendo un poco mas entendibles, pero hay partes en las que no se entiende nada xd

Excelente contenido, muy genial y formas nuevas de hacer cosas con el manejo de las repuestas para adaptarlas de una mejor forma

Excelente

Super Genial esta normalizacion

El enlace para ver las tareas:
https://jsonplaceholder.typicode.com/todos

una maravilla todo lo que se aprende con este profesor.

Genial! Muy claro

Ufff en esta clase si quedo super claro el concepto y la idea general de lo que se hizo 馃槂

Ahora todo se va aclarando 馃槂

Genial esta clase estuvo muy bine explicada !

A continuaci贸n otro forma de hacerlo

    const respuesta = await axios
      .get('https://jsonplaceholder.typicode.com/todos')
      .then(({ data }) =>
        data.reduce((acc, curr) => ({
          ...acc,
          [curr.userId]: {
            ...acc[curr.userId],
            [curr.id]: {
              ...curr,
            },
          },
        }))
      )
const tareas = {}
respuesta.data.map((task) => {
	return tareas[task.userId] = {
		...tareas[task.userId],
		[task.id]: {
			...task
		}
	}
})```

Si est谩s usando react, tienes lodash instalado, puedes simplificar el map con un reduce y merge:

        const tareas = respuesta.data.reduce((obj, curr) =>
                _.merge(obj, {
                    [curr.userId]: {
                        [curr.id]: {
                            ...curr
                        }
                    }
                }),
            {});

esta clase en especial me llamo la atencion por el uso de map 鈥eje