Normalizar datos

Ya habia usado el metodo “map” de los array, pero ahora lo entiendo mucho mas, casi que le digo “hola, 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 …jeje