Mapear Objetos

Clase 46 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

Resumen

Un objeto Map puede iterar sobre sus elementos en orden de inserción. Un bucle for..of devolverá un array de [clave, valor] en cada iteración.

Cabe destacar que un Map el cual es un mapa de un objeto, especialmente un diccionario de diccionarios, solo se va a mapear en el orden de inserción del objeto — el cual es aleatorio y no ordenado.

Comentarios

Luis Enrique Mendez Gomez

student•

Recuerden que para que no cargue las tareas dos veces agregar el condicional al componentDidMount asi:

`  componentDidMount() {
    if (!Object.keys(this.props.tareas).length) {
      this.props.traerTodas();
    }
  }`

Frank Antonio Piñin Ato

student•

Gracias por el recordatorio

Willy David Da Conceicao Lozada

student•

Creamos una función que va a iterar las key del objeto tareas, son los ids de los usuarios y a cada llave que retorne un h2 y un div que llame a ponerTareas()
ponerTareas() recibe el usu_id, el id del usuario, recordemos que iteramos por las tareas del usuario y por cada usuario retorno todas las tareas del usuario junto un checkbox.

Conclusión: al componente Tareas, iteramos el objeto tareas que, por cada usuario le ponemos todas las tareas.

Manuel Rivera

student•

No sabía que se podía usar métodos como map y atributos como length sobre objetos, ahora se que ya existe Object.Keys, Gracias

Eligreg López

student•

Solo me carga una tarea por usuario, ¿a quién más le pasa?

Frederico Zanoni Ruiz

student•

Revisa en el tareasActions el mapeo del respuesta.data

Andrés Carrillo

student•

No me salen los titulos y copie y pegue el codigo y nada ._.

Frank Antonio Piñin Ato

student•

Buena clase, se esta entendiendo mas

Cristian Andres Ladino Peña

student•

Excelente clase. 🙂

Johan García Trejo

student•

Excelente

Juan Felipe Salamanca Gonzalez

student•

Recordar que el valor que debe ir en el key es el que pasamos por el map en la arrow function

Elkin Omar Jiménez García

student•

Excelente clase, mil gracias :D

Paul Cortes

student•

Genial todo el contenido es oro

Paul Cortes

student•

Cabe destacar que un Map el cual es un mapa de un objeto, especialmente un diccionario de diccionarios, solo se va a mapear en el orden de inserción del objeto — el cual es aleatorio y no ordenado.

Paul Cortes

student•

Un objeto Map puede iterar sobre sus elementos en orden de inserción. Un bucle for..of devolverá un array de [clave, valor] en cada iteración.

Erick Daniel Pérez Mata

student•

No me imprimia los titulos pero aqui mi solucion:

mostrarContenido = () => {
        const { tareas, cargando, error } = this.props;
        if(cargando) {
            return <Spinner />
        }
        if(error) {
            return <Fatal mensaje={error} />
        }
        var i = 0, j = 0;
        var titleArray = [];
        var completedArray = [];
        return Object.values(tareas).map((tarea, index) => {
            if(i === 0) {
                titleArray = [];
                completedArray = [];
            }
            if(i < 20) {
                i++;
                j = tarea['userId']
                titleArray.push(tarea['title']);
                completedArray.push(tarea['completed']);
                if(i === 20) {
                    i = 0;
                    return (
                        <div key={ tarea['userId'] }>
                            <h2>Usuario { tarea['userId'] }</h2>
                            <div className='contenedor_tareas'>
                                { titleArray.map((title, index) => (
                                    <div key={'Tarea ' + j + index}>
                                        <input type='checkbox' defaultChecked={ completedArray[index] }/>
                                        {title}
                                        <br/>
                                    </div>
                                ))}
                            </div>
                        </div>
                    )
                }
            }
        })
    };

David Dias

student•

Excelente

Brayan Mateo Montañez Baron

student•

Wow, super bien explicado

Edgar Lopez Arroyo

student•

onerTareas = (usu_id) => {
        const { tareas } = this.props
        const por_usuario = {
            ...tareas[usu_id]
        }

        return Object.keys(por_usuario).map((tar_id) => (
            <div key={ tar_id }>
                <input type="checkbox" defaultChecked={  por_usuario[tar_id].completed} />
                {
                    por_usuario[tar_id].title
                }
            </div>            
        ))
    }

mostrarContenido = () => {
        const { tareas, cargando, error } = this.props;
        if(cargando) {
            return <Spinner />
        }
        if(error) {
            return <Fatal mensaje={error} />
        }
        var i = 0, j = 0;
        var titleArray = [];
        var completedArray = [];
        return Object.values(tareas).map((tarea, index) => {
            if(i === 0) {
                titleArray = [];
                completedArray = [];
            }
            if(i < 20) {
                i++;
                j = tarea['userId']
                titleArray.push(tarea['title']);
                completedArray.push(tarea['completed']);
                if(i === 20) {
                    i = 0;
                    return (
                        <div key={ tarea['userId'] }>
                            <h2>Usuario { tarea['userId'] }</h2>
                            <div className='contenedor_tareas'>
                                { titleArray.map((title, index) => (
                                    <div key={'Tarea ' + j + index}>
                                        <input type='checkbox' defaultChecked={ completedArray[index] }/>
                                        {title}
                                        <br/>
                                    </div>
                                ))}
                            </div>
                        </div>
                    )
                }
            }
        })
    };

onerTareas = (usu_id) => {
        const { tareas } = this.props
        const por_usuario = {
            ...tareas[usu_id]
        }

        return Object.keys(por_usuario).map((tar_id) => (
            <div key={ tar_id }>
                <input type="checkbox" defaultChecked={  por_usuario[tar_id].completed} />
                {
                    por_usuario[tar_id].title
                }
            </div>            
        ))
    }

Mapear Objetos

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