Normalizar datos

Clase 45 de 57 • Curso de Redux por Bedu

Contenido del curso

Bienvenido al curso

Repaso React

Introducción a Redux

11
¿Qúe es Redux, cuándo usarlo y por qué?
00:15 min

Fases de Redux

Fases Extra

Compartir información en Redux

Métodos HTTP

Conclusión

Tomar examen

Comentarios

Oscar Estuardo de la Mora

student•

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 :D

Diego Ivan Padilla Bernal

student•

cabe mencionar que también está el forEach que en este caso hubiera sido mejor porque no se retornan datos

Andres Roberto Coello Goyes

student•

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

David Dias

student•

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

Andrés Felipe Eslava Zuluaga

student•

jajajaja

Willy David Da Conceicao Lozada

student•

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

Angel Enrique Barrios

student•

ok tengo que ver el JavaScript por Bedu. URGENTE

Gonzalo Pimentel

student•

Con su explicación quedo clarisimo

Claudia Andrea Aparicio Chavez

student•

¿Como definirían qué es normalizar los datos?

Willy David Da Conceicao Lozada

student•

como de organizar los datos para que nosotros podamos manejarlos de la manera que queremos, así ya los tenemos ordenados a nuestra manera 😁 creo xD

Juan Castro

teacher•

Organizar nuestros datos de tal manera que su acceso sea fácil y efectivo. :wink:

Jayro Jesus Ku Salazar

student•

Una vez visto las formas de como tratar los datos en Redux me queda la duda ¿cuando es conveniente normalizar los datos por el id del usuario y cuando es conveniente hacerlo por casillas de arreglos?, alguien me puede sacar de dudas

Carlos Eduardo Santaella Guevara

student•

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

Brayan Mateo Montañez Baron

student•

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

Jorge Iván Durango Acosta

student•

Es posible hacer esto con el método reduce?

Ivan Santiago

student•

Me parece que no 😅. El método reduce se usa cuando quieres filtrar un array. En este caso ese no es el objetivo. . Lo que se quiere hacer aquí es simplemente ordenarlo, sin retornar ningún valor. De hecho, sería mejor usar forEach en vez de map, ya que, a diferencia de map, forEach no retorna ningún valor. . Te recomiendo leer la documentación de cada función 😎 Función map Función reduce Función forEach

softdynamic sac

student•

Si se puede,

const fomatTasks = tasks.reduce((carry, item)=>{
 carry[item.userId] = { ...carry[item.userId],[item.id]: { ...item }  }
 return carry;
},[])

Melissa González Nebrijo

student•

Bastante claro la verdad.

Juan Felipe Salamanca Gonzalez

student•

Me parece mucho mas practica esta forma que la anterior, aunque he visto que hay una forma incluso mejor quisiera saber por que es mejor usar forEach a Map??

Juan Castro

teacher•

No es que sea mejor o peor. Solo tienen objetivos diferentes: https://programmingwithmosh.com/javascript/whats-the-difference-between-foreach-and-map-in-javascript/. :wink:

Gabriel De Andrade

student•

Yo por mi parte prefiero usar .map pues no modifica el array que estás recorriendo, esto va muy de la mano con paradigmas que hacen mucho uso de la Inmutabilidad como la programación funcional.

Willy David Da Conceicao Lozada

student•

Porque me aparece esto en la consola? [HMR] Waiting for update signal from WDS...

Juan Castro

teacher•

¿Cuándo te aparece este error? ¿Ejecutaste algo para que saliera o está desde que abres la terminal?

Juan Castro

teacher•

No es necesario. Pensé que WDS (Webpack Developmeent Server) es refería al WSL (Windows Subsystem for Linux). :sweat_smile:

Están trabajando en ese Issue, mira: https://github.com/facebook/create-react-app/issues/8153.

Mientras tanto puedes probar con este comando:

sed --in-place -e "66a\    slashes: true," ./node_modules/react-dev-utils/webpackHotDevClient.js

Y si no funciona, creando tus proyectos con esta versión:

npx create-react-app project-name --scripts-version 3.2.0

Andrés Felipe Eslava Zuluaga

student•

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.

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

Hernán David Mercado Fernández

student•

Esta clase me enseñó que tengo que repasar mi lógica de programación

Miguel Angel Reyes Moreno

student•

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

Cristian Andres Ladino Peña

student•

Excelente clase. Entendí mejor para que era la función de obtener las tareas. 🙂

Daniel Lopez

student•

que buena clase!!!

Jose Ortiz

student•

excelente explicacion de normalizacion de datos!

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

response.data.map(
    response.data.map(
        (todo) =>
          (todos[todo.userId] = {
            ...todos[todo.userId],
            [todo.id]: {
              ...todo,
            },
          }
    )
);

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

Normalizar datos

Bienvenido al curso

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

¿Qué conocimientos me recomiendan para tomar este curso?

Repaso React

¿Qué es React y cómo funciona?

Preparando nuestro entorno de trabajo

Creación de la app con React

Agregando funciones a la app con React

Stateful vs Stateless

Ciclo de vida de React

Manejando promesas

React Router DOM

Introducción a Redux

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

Fases de Redux

Introducción: las fases de Redux

Store

Reducers

Conexión a un componente

Action Creators

Redux Thunk

Explicación teórica: ciclo completo de Redux

Práctica: ciclo completo de Redux

Fases Extra

Archivos Types

Try Catch

Escenarios asíncronos

Componente Spinner

Componente Fatal

Tabla como componente

Compartir información en Redux

Introducción Compartir información en Redux

Parámetros por URL

Compartir Reducer

Múltiples Reducers

Llamando a múltiples reducers en una acción

Uso del estado en la acción

Evitar segundas búsquedas

Inmutabilidad

Evitar sobrescritura

Validación compuesta

Validación de errores

Modificando respuesta de url

Estado con interacción

Mostrar componentes dinámicamente

Llamadas asincronas dinámicas

Props por herencia vs estado

Estado compartido

Métodos HTTP

Introducción a métodos HTTP

Nuevo ciclo Redux

Normalizar datos

Mapear Objetos

Componente para agregar tarea

Manejar inputs con Reducer

POST

Deshabilitando botón

Redireccionar

Reutilizar componentes

PUT

DELETE

Últimos detalles

Conclusión

Conocimientos adquiridos

Qué hacer a continuación