Datos inmutables con Immutable.js

Clase 41 de 58 • Curso Profesional de React con Redux 2016

Clase anteriorSiguiente clase

Miguel Ruiz Moreno

student•

¿Cuales son todas las ventajas que obtenemos al usar Immutable?

Sergio Daniel Xalambrí

student•

Es más fácil escribir y leer nuestro código (algo muy importante ya que la mayor parte del tiempo estamos leyendo código)
Es más fácil evitar problemas de que mutemos un dato del estado por error (hacer state.algo = 1 por ejemplo)
Al trabajar con mapas tenemos muchos métodos como map, filter, reduce, sortBy, etc. que con objetos y mapas nativos de JS no tenemos y ayuda un montón tener estas funcionalidades.

Martín Varela

student•

En el reducer:
Porque en commentsReducer utilizas .reduce(), y en usersReducer no ? Cual es la diferencia?

Gracias

Sergio Daniel Xalambrí

student•

En usersReducer obtengo un solo usuario por acción, entonces simplemente hago un set para agregar ese usuario.

En commentsReducer obtengo una lista de comentarios por acción, entonces uso reduce para agregar cada comentario a la lista (el state actual).

Bryam Rodriguez

student•

Me sale diferente el objeto user, solo lo tengo como objeto y no inmutable. A qué se debe?

Sergio Daniel Xalambrí

student•

Sin ver tu código es imposible decirte a ciencia cierta, pero me suena a que no lo están convirtiendo a un objeto de Immutable.js antes de guardarlo al store.

Bryam Rodriguez

student•

Era eso, lo revisé y en ningún momento lo convertía a map. Gracias

Bryam Rodriguez

student•

Al inicio de este video explicas que se crean objetos nuevos con concat y Object.assign ¿Por qué es preferible crear objetos nuevos y no editar el objeto anterior?

Sergio Daniel Xalambrí

student•

Redux requiere que trates tu estado como inmutable, esto significa nunca modificar el objeto anterior, en vez de eso crear un nuevo objetos con los datos viejos y los cambios que aplicamos. Si no seguimos esta regla puede haber problemas luego de que Redux no tome bien un cambio.

Erick Vanegas

student•

El mismo React te dice que ocupes, setState en vez de modificar directamente los valores del objecto.
La razón es que si modificaras los valores directamente, tendrías problemas con las funciones que internamente corre React: por ejemplo, cuando corre los render luego que el State cambia (Y todos las otras funciones del cliclo de vida de un componente React)

Néstor Fabián Gonzalez

student•

Hola sergio tengo el siguiente error al ejecutar npm run bff
TypeError: (0 , _reduxLogger.createLogger) is not a function

Néstor Fabián Gonzalez

student•

Ya resolví este incidente, ahora tengo el siguiente error cuando ejecuto npm run bff
Warning: Failed prop type: Invalid prop posts.size of type number supplied to Home, expected object.
in Home

Angel Mogrovejo

student•

yo modifique el PropType

posts: PropTypes.shape({ // posts es un objectof immutable
    map: PropTypes.func,
    size: PropTypes.number,
  }).isRequired,

Adrián Natividad Hernandez León

student•

Una pregunta, si tengo varios archivos api.js (obvio con diferentes nombres) cual seria la mejor forma de establecer baseUrl para no tenerla fija en cada uno de los archivos y si cambia la ip de la api como actualizarla sin tener que cambiar baseUrl en cada uno archivos, seria posible usar redux o existe alguna otra forma?

Sergio Daniel Xalambrí

student•

No necesitas Redux para eso, simplemente guarda el baseUrl en una constante en un archivo y usala en todos los clientes de APIs.

Igual si vas usar la misma URL base entonces esos archivos son para el mismo API por lo que no tiene mucho sentido tener varios archivos.

Adrián Natividad Hernandez León

student•

Con constante se refiere al contexto?

Datos inmutables con Immutable.js

Bienvenido al curso

Actualizaremos este curso pronto

Bienvenido al curso de React

Fundamentos

¿Qué es React?

Hola Mundo con React

¿Qué es y cómo funciona el Virtual DOM?

Introducción a JSX

Creación de componentes

Componentes Puros vs de Estado

Ciclo de vida de un componente

Ciclo de vida de componentes

Manejo de eventos del DOM

Event handlers con parámetros personalizados

Contexto de la aplicación

Componentes de Alto Orden (HOC) y Mixins

Creación del proyecto

Presentación del proyecto

Instalación de Node.js y usando npm

Estructura de archivos

Iniciar un servidor de render básico - Render en Server

Module bundlers en JavaScript

Configurar Webpack para el servidor de render

Crear una app con React y React Router

Manejo de rutas en el servidor con React Router

Crear cliente para consumir el API

Iniciar la app en el navegador y configurar Webpack para producción

Iniciar un servidor de estáticos con zeit/list

Herramientas de desarrollo de React

Consumir el API y mostrar datos en la home

Perfil de usuarios

Estado de cargando y detalle de post

Paginación de posts mediante scroll infinito

Mostrar listado de comentarios en cada post

Estilizar componentes con CSS Modules

Linter y buenas prácticas con ESLint

Internacionalización con React Intl

Deploy a producción

Implementación de Redux

Patrones de arquitectura de aplicaciones Frontend

Implementación inicial con Redux para los posts

Uso de middlewares

Acciones asíncronas

Dividir el reducer en funciones más pequeñas y combinarlas

Datos inmutables con Immutable.js

Herramientas de desarrollo

Conclusiones

Pruebas automatizadas de reducers

Pruebas de componentes de React

Actualizando a la última versión de React Router

Desafíos

Cambiar el título de la página dependiendo de la ruta (en el servidor y cliente)

Implementar Redux en perfíl de usuario y detalle de un post

Cargar datos iniciales en el servidor

Desafío especial

Contenido bonus

Glosario

Evitar que webpack genere el CSS durante el build del servidor

LazyLoad de imágenes

Animaciones con ReactCSSTransitionGroup

Server render con Next.js

Aplicaciones universales/isomórficas

Iniciar proyectos con create-react-app

Diplomado de desarrollo de aplicaciones con ReactJS