SlideShare une entreprise Scribd logo
1  sur  31
Télécharger pour lire hors ligne
Redux en React
SERGIO ZAMARRO
Javascript Developer
@zamarrowski
Sergio Zamarro Sánchez
zamarrowski
💄
Motivación
• SPA: grandes estados de la aplicación.
• Perdida de control al actualizar el estado.
• Como, cuando y por qué se actualiza el estado.
• Intentar hacer predecible un cambio de estado.
Redux en React
Conceptos básicos
Redux en React
• Store.
• Actions.
• Reducers.
Store
Redux en React
• Objeto que guarda todo el estado de nuestra aplicación.
• Solo debería haber una store en una Redux app.
Store
Redux en React
Actions
Redux en React
• Objeto plano.
• Representa la intención de cambiar el estado de la aplicación.
• Es la forma de obtener los datos de la Store.
• Tienen una propiedad llama “type”.
Actions
Redux en React
Reducers
Redux en React
• Función que recibe una acumulación y un valor y devuelve una
nueva acumulación.
• En Redux reciben un estado y una acción y devuelven un
nuevo estado.
• Son funciones puras.
Reducers
Redux en React
Tres principios de Redux
• Single source of truth.
• El estado es de solo lectura.
• Funciones puras.
Redux en React
Single source of truth
Redux en React
El estado es de solo lectura
Redux en React
• Solo se puede cambiar el estado mediante acciones.
• Esto asegura de que ninguna de la vistas pueda escribir
directamente en el estado.
• Las actualizaciones del estado se producen de una en
una.
Funciones puras
Redux en React
• Aquellas que dada la misma entrada siempre devuelve
la misma salida.
• No produce ningún efecto secundario.
• No depende de ningún estado externo.
Redux flow
Redux en React
Redux en React
en
Redux en React
React en Redux
• Definir acciones de nuestra app.
• Crear reducers.
• Combinar reducers.
• Configurar store.
Redux en React
Definiendo acciones
task.actions.js:
Redux en React
Creando reducers
task.reducers.js:
Redux en React
Combinando reducers
reducers.js:
Redux en React
Configurar store
configStore.js:
Redux en React
Redux DevTools
Redux en React
React en Redux
• MapStateToProps.
• MapDispatchToProps.
• Container components.
• Presentational components.
Redux en React
MapStateToProps
Redux en React
MapDispatchToProps
Redux en React
Container Components
• Obtención de datos.
• Actualización del estado.
• Está conectado a Redux.
• Proporciona los datos necesarios a los
presentational components.
Redux en React
Presentational Components
• Se preocupan de como se ven las cosas.
• No depende de Redux.
• Recibe los datos a través de props.
• Realiza acciones a través de callbacks.
• Son escritos como functional components.
Redux en React
Container vs Presentational
Redux en React
Práctica
Redux en React
Links
• https://medium.com/@dan_abramov/smart-and-dumb-
components-7ca2f9a7c7d0
• https://facebook.github.io/react/blog/2015/10/07/react-
v0.14.html#stateless-functional-components
• https://chrome.google.com/webstore/detail/redux-
devtools/lmhkpmbekcpmknklioeibfkpmmfibljd?hl=es
• https://github.com/gaearon/redux-thunk
• http://redux.js.org/docs/advanced/Middleware.html
Redux en React
Gracias!

Contenu connexe

Similaire à Charla sobre Redux en Adalab

Presentacion JDE Customers Day 2 Impacto Cambio Tipos IVA
Presentacion JDE Customers Day 2 Impacto Cambio Tipos IVAPresentacion JDE Customers Day 2 Impacto Cambio Tipos IVA
Presentacion JDE Customers Day 2 Impacto Cambio Tipos IVA
oracledirect
 
Integración de Arel en ActiveRecord
Integración de Arel en ActiveRecordIntegración de Arel en ActiveRecord
Integración de Arel en ActiveRecord
miloops
 
Patrones de diseño II
Patrones de diseño IIPatrones de diseño II
Patrones de diseño II
kaolong
 

Similaire à Charla sobre Redux en Adalab (17)

Taller de Introducción a Ruby on Rails (2ª parte)
Taller de Introducción a Ruby on Rails (2ª parte)Taller de Introducción a Ruby on Rails (2ª parte)
Taller de Introducción a Ruby on Rails (2ª parte)
 
React-Framework Exposicion sobre React, composiciones etc.
React-Framework Exposicion sobre React, composiciones etc.React-Framework Exposicion sobre React, composiciones etc.
React-Framework Exposicion sobre React, composiciones etc.
 
React Hooks ¿Por donde empezar?
React Hooks ¿Por donde empezar?React Hooks ¿Por donde empezar?
React Hooks ¿Por donde empezar?
 
Conociendo ReactJs . Scio Talks
Conociendo ReactJs . Scio TalksConociendo ReactJs . Scio Talks
Conociendo ReactJs . Scio Talks
 
Webinar - Iniciación a React para desarrollo de interfaces de usuario
Webinar - Iniciación a React para desarrollo de interfaces de usuarioWebinar - Iniciación a React para desarrollo de interfaces de usuario
Webinar - Iniciación a React para desarrollo de interfaces de usuario
 
Reactive extensions - secondnug
Reactive extensions - secondnugReactive extensions - secondnug
Reactive extensions - secondnug
 
Rails intro
Rails introRails intro
Rails intro
 
Hi Fiber!
Hi Fiber!Hi Fiber!
Hi Fiber!
 
Ruby On Rails Intro
Ruby On Rails IntroRuby On Rails Intro
Ruby On Rails Intro
 
Android Superstar - Buenas Prácticas
Android Superstar - Buenas PrácticasAndroid Superstar - Buenas Prácticas
Android Superstar - Buenas Prácticas
 
Spring on Flash Platform
Spring on Flash PlatformSpring on Flash Platform
Spring on Flash Platform
 
Portafolio
PortafolioPortafolio
Portafolio
 
React, Flux y React native
React, Flux y React nativeReact, Flux y React native
React, Flux y React native
 
Angular js in mobile
Angular js in mobileAngular js in mobile
Angular js in mobile
 
Presentacion JDE Customers Day 2 Impacto Cambio Tipos IVA
Presentacion JDE Customers Day 2 Impacto Cambio Tipos IVAPresentacion JDE Customers Day 2 Impacto Cambio Tipos IVA
Presentacion JDE Customers Day 2 Impacto Cambio Tipos IVA
 
Integración de Arel en ActiveRecord
Integración de Arel en ActiveRecordIntegración de Arel en ActiveRecord
Integración de Arel en ActiveRecord
 
Patrones de diseño II
Patrones de diseño IIPatrones de diseño II
Patrones de diseño II
 

Charla sobre Redux en Adalab