Implementación inicial con Redux para los posts

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

Clase anteriorSiguiente clase

Arquimedes

student•

Sergio demasiado capo!, perfecto hasta ahora, explicas cada line no queda nada en el aire, excelente

Carlos A Sanchez

student•

El problema es que en ciertos momento no se entienden las palabras de lo que quiere explicar por explicarlo demasiado rápido.
Sergio, no cabe duda que conoces el tema excelentemente solo recuerda que la intención es transmitir ese conocimiento.

Miguel Angel Gatto Angel Gatto

student•

Yo los miro primero en velocidad mas lenta para ir asimilando los concepto mirarlo en 0,85x me ayudó muchísimo.
Me hago una pasada en 0,85 de los videos con muchos conceptos como este y después una a 1,25x para ir haciendo hot coding en vivo

Edgar Moises Valdez Faria

student•

Sergio concuerdo con @arquimedes3 de que sos un Capo pero muchas cosas que mencionas que son importante los dices muy rápido y cuando se entendió lo anterior ya estas mencionando otra cosa importante. Creo que hubiese sido mejor que te tomes una pausa a escribir el código y expliques mejor lo que está haciendo.

Entiendes mucho y para ti ya es algo normal pero para que nosotros los simples mortales podamos captar tus todos tus conocimientos necesitamos pausa entre código para entender lo que pasa.

Puede que el problema de que no esté entendiendo es porque me haya saltado algún curso. Hay algún curso que sea pre-requisito para este ?

Espero no me tomes de mala manera, es solo que React es tan importante que me preocupa que no lo este captando bien.

Álvaro René Sánchez Serrano

student•

Estoy deacuerdo contigo, lo que yo hago es mirar el video , luego investigar por mi cuenta , despues volver a ver el video , luego investigar hasta que todo tiene sentido.
Sin duda hay que entender bien las caracteristicas de javascript como lenguaje en especial lo de pasar por valor o referencia. que es la razon por la que uso Object.assign y entender bien los que es que un objeto sea inmutable.

José David García Rodríguez

student•

Comparto en caso de que algunos no hayan entendido, y de paso, si estoy errado, me ayudan a entender. Cuando Sergio hace uso de Object.assign, es porque de esta forma, crea una nueva instancia en memoria, cuyo objeto tendra los datos que asigna como el state, y los demás objetos que él pasa por parámetros a la función. Ahora, si no lo hiciera así, como él bien lo explica, estaríamos pasando como especie de una referencia del state original, cosa que al modificar el objeto (al que se le asignó el state), estaríamos modificando directamente el state original.

Javier Alejandro Perez Fernandez

student•

No se pero es muy muy molesto que lo que explica el profesor en los videos no es todo el codigo que está en los archivos, toca ponerse a ver todas las diferencias con respecto al repo de GitHub y muchas cosas no las explican ni idea porque.

Entre este video y el video del deploy a la nube de now, totalmente diferentes esos proyectos, muchos errores, un monton de codigo que no explicaron y no está actualizado (webpack 2). Por favor suban los videos completos de todo lo que editan en el curso. Ibamos bien hasta aqui, lastima porque dañan el avance del curso. @sergiodxa @ThespianArtist

Aitor Chicharro

student•

Se pueden tener varios stores, y providers? (Una store/provider por “app”). Para proyectos grandes.

Sergio Daniel Xalambrí

student•

No, la idea principal es que tengas un solo store y que este sea la única fuente de la verdad sobre el estado de tu aplicación.

KaMi lml

student•

No sé si esta pregunta vaya acá pero ahí va. En el caso de usar Next.js con Redux, cómo hago HOCs para envolver a las páginas y no tener que estar repitiendo el código para llamar a redux en cada página?

Me refiero al wrapper de redux para nextjs que se tiene que llamar en cada página 😃
next-redux-wrapper

Sergio Daniel Xalambrí

student•

Usá next-redux-wrapper, si querés hacerlo vos mismo revisá el código de la librería.

Juan Castro

teacher•

Tenia entendido que Redux se usaba para conectar/comunicar componentes, pero en este ejemplo solo se cambio el state por los props, nunca se utilizaron propiedades fuera del componente.

Esto es recomendable?

Sergio Daniel Xalambrí

student•

Redux es para contener el estado de tu aplicación.

Los datos de los posts son parte del estado, por eso los guardamos ahí y los leemos luego desde Redux, lo interesante es que como ya están en el store de Redux al cambiar de ruta y volver a la home los datos siguen ahí entonces podémos volverlos a usar y evitar pedir una montón de veces los mismos datos.

camilo andres reina cifuentes

student•

Sergio el dispatch tambien se puede hacer en las actions?

export const getAllProducts = () => dispatch => {
  shop.getProducts(products => {
    dispatch(receiveProducts(products))
  })
}

Elias Ortega Ortega Ortega

student•

Porque el componente Home tiene su propio estado en vez utilizar el store y pasarlos como props?

Sergio Daniel Xalambrí

student•

Hay dos formas de usar Redux.

Tener absolutamente todo en Redux, esto es lo que estas diciendo de sacar el loading y el error de React y ponerlo en Redux. Esto es guardar el estado de la App y de la UI.
Tener solo datos que se usan en varias partes de la aplicación, esto es lo que hicimos en el curso, donde solo guardamos ciertos datos (posts, comentarios y autores) que se comparten en la aplicación y no todo. Acá solo guardamos datos de la App.

Las dos formas son 100% válidas y dependen de que tanto quieras guardar en el store, hay que tener en cuenta que si guardas datos de la UI en el store tenés que tener esos datos bien separados por componentes para evitar que por error al querer actualizar una parte termines cambiando otra parte también.

Estaría interesante que trates guardar todo el estado de la App y la UI en el store y compartas con el resto como lo lograste para tener una segunda opción de como hacer 😃

Néstor Fabián Gonzalez

student•

![Hola buenas noches Sergio, tengo el siguiente error al ejecutar npm run deploy ](

Gibrán Javier Sanchez Aguiñiga

student•

Donde es mas recomendable hacer peticiones a una api en las acciones o en los componentes?

Sergio Daniel Xalambrí

student•

En las acciones es un lugar genial ya que luego podés simplemente enviando una acción a Redux generar una petición sin importar el componente desde donde se va a enviar la acción.

Henry De La Hoz

student•

Pero noté que en la implementación de MVU que haces en el video, las llamadas a la API no se hacen dentro de la acción, sino en la definición del componente. A que se debe la diferencia?.

camilo andres reina cifuentes

student•

que son las entities, son obligatorias en el estado a que hacen referencia?

Sergio Daniel Xalambrí

student•

Una entidad (entity) es un tipo de dato, por ejemplo un Post es una entidad de tipo Post, un User es otra entidad y así, imaginate que son los modelos de una aplicación, solo que nosotros no tenemos modelos, simplemente manejamos un mapa (objeto) de entidades para poder guardar cualquier tipo de dato sin preocuparnos por modelos.

Álvaro René Sánchez Serrano

student•

Cual es la funcion del dispatcher ?

Gladys Yovana Mamani Camaticona

student•

cual es la diferencia al instalar redux
con redux-zero

Carlos Sampol

Team Platzi•

redux-zero Es una libreria un poco mas liviana.
Tiene un solo store y no tiene reducers.

Diego José Molina Gonzalez

student•

@sergiodxa Profesor, me podría explicar 2 cosas por favor:

Qué significa esta línea?

connect(mapStateToProps)(Home);

Cuando se envuelve a toda la aplicación con:

<Provider store={store}>

significa que de todos lados puedo acceder a los métodos de la store mediante los props?

Muchas gracias!

Sergio Daniel Xalambrí

student•

<Provider store={store}> lo que hace es poner el store en contexto.
La línea connect(mapStateToProps)(Home); lo que hace es acceder a ciertos datos del Store (que esta en contexto) y mandarlos como props.

No podés acceder al store con solo usar Provider, necesitas leerlos de contexto y eso hace connect.

Diego José Molina Gonzalez

student•

Gracias por responder, pero aún no me queda claro por qué se llama a (Home) luego de (MapStateToProps)?

connect(MapStateToProps)(Home);

Gracias!

Implementación inicial con Redux para los posts

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