Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Clase redux 18 noviembre

Clase redux 18 noviembre

Daniel Belohlavek

November 18, 2017
Tweet

More Decks by Daniel Belohlavek

Other Decks in Technology

Transcript

  1. El problema: pasar props < C o m p o

    n e n t > / / e s t e c o m p o n e n t e t i e n e u n d a t o < C o m p o n e n t > < C o m p o n e n t > < C o m p o n e n t > < C o m p o n e n t > < C o m p o n e n t / > < / C o m p o n e n t > < / C o m p o n e n t > < C o m p o n e n t > < C o m p o n e n t > < C o m p o n e n t / > / / e s t e c o m p o n e n t e n e c e s i t a e s e d a t o ( p o r p r o p s ) < / C o m p o n e n t > < / C o m p o n e n t > < / C o m p o n e n t > < / C o m p o n e n t > < / C o m p o n e n t > Es muy frecuente encontrarnos con casos donde un componente profundamente anidado require un dato que un componente padre posee. En este caso deberiamos pasar el dato por props a traves de todos los niveles de componentes hasta llegar al objetivo. Ninguno de los componentes intermedios necesita el dato. Pero se ven obligados a recibirlo y pasarlo hacia abajo.
  2. La solucion: estado desacoplado de los componentes En lugar de

    mantener el estado de la aplicacion distribuido entre los estados internos de cada componente, debemos buscar una manera de desacoplar el estado a un lugar mas generico. Una manera simple de pensarlo es: es necesaria una forma de persistir estado de manera aislada para evitar la duplicacion de datos y facilitar la distribucion de los mismos.
  3. Store El store juega el papel de la unidad de

    almacenamiento aisalda que describimos en el slide anterior. Es el elemento principal de redux y posee las siguientes propiedades: - Es inmutable: recibe el estado actual y devuelve un estado nuevo segun la accion realizada. - Permite la definicion de middlewares (scripts intermedios) para agregar funcionalidades extra. - Esta directamente asociado a un reducer raiz. Para crear un nuevo store debe llamarse a la funcion createStore de la siguiente manera: c r e a t e S t o r e ( r e d u c e r , m i d d l e w a r e s ) ; / / o a l t e r n a t i v a m e n t e c r e a t e S t o r e ( r e d u c e r , i n i t i a l S t a t e , m i d d l e w a r e s ) ; El store posee dos metodos clave: - dispatch(action): permite llamar una accion para desencadenar un cambio en el estado. - subscribe(): permite suscribirse a cambios en el estado de la aplicacion.
  4. Actions Un action no es mas que un simple objeto

    que contiene una propiedad "type" (string) y cualquier otra informacion que queramos. Una action cumple el rol de ser el disparador de un cambio en el estado y una vez dispatcheada llegara al reducer para ser procesada. Llamamos "action creators" a aquellas funciones que devuelven una Action (hacen return de un objeto). Son funciones simples y pueden llamarse desde cualquier lado (muy faciles de testear). Normalmente seran llamadas desde nuestros componentes de React a traves de "containers", de esta forma podremos separar nuestra logica de negocio de nuestros componentes de React. c o n s t A c t i o n s = { G r e e t : ' G r e e t ' / / s e p a r a r e s t o f a c i l i t a c a m b i o s f u t u r o s } ; f u n c t i o n g r e e t ( n a m e ) { r e t u r n { t y p e : A c t i o n . G r e e t , p a y l o a d : n a m e / / p a y l o a d p u e d e s e r l o q u e q u e r a m o s ( i n c l u s i v e n o e x i s t i r ) } ; } d i s p a t c h ( g r e e t ( ' P i k a c h u ' ) ) ;
  5. Reducers Los reducers son funciones simples que recibien un estado

    (normalmente el estado actual) y una accion, y devuelve un nuevo estado. Lo importante es: NO MUTA/MODIFICA EL ESTADO ANTERIOR. Internamente dentro de un reducer normalmente se utiliza un Switch para retornar diferentes estados segun la accion, pero esta logica puede ser manejada como le quede mas comodo al desarrollador o al equipo. c o n s t i n i t i a l S t a t e = { n a m e : n u l l } ; f u n c t i o n r e d u c e r ( s t a t e = i n i t i a l S t a t e , a c t i o n ) { c o n s t { t y p e , p a y l o a d } = a c t i o n ; s w i t c h ( t y p e ) { c a s e : A c t i o n . G r e e t : r e t u r n { . . . s t a t e , n a m e : p a y l o a d } ; / / p a y l o a d c o n t i e n e u n s t r i n g d e f a u l t : / / e l s p r e a d o p e r a t o r n o s p e r m i t e c r e a r n u e v o s o b j e t o s f a c i l m e n t e r e t u r n { . . . s t a t e } } }
  6. Todo junto: react-redux En este punto lo unico que necesitamos

    es una herramienta que nos permita leer el estado y dispatchear acciones facilmente desde nuestros componentes de react. De esta manera podriamos (por ejemplo) dispatchear una accion desde un onClick. Para esto existen los contenedores de react-redux. Un contenedor es un componente decorado (alterado). A traves de la funcion "connect" podremos definir dos funciones para nuestro componente de react: "mapStateToProps" y "mapDispatchToProps". Como sus nombres indican estas funciones permitiran leer/escribir a redux a traves de props de react. Estas funciones se setean a traves del higher-order-component (tambien conocido como Decorator) "connect()". Los HOCs recibien un componente y devuelven un componente decorado. c o n s t m a p S t a t e T o P r o p s = ( s t a t e ) = > ( { n a m e : s t a t e . n a m e } ) ; c o n s t m a p D i s p a t c h T o P r o p s = ( d i s p a t c h ) = > ( { o n G r e e t : ( n a m e ) = > g r e e t ( n a m e ) / / h a b i e n d o i m p o r t a d o n u e s t r a a c t i o n c r e a t o r g r e e t } ) ; / / D e c o r a m o s n u e s t r o c o m p o n e n t e d e r e a c t c o n n e c t ( m a p S t a t e T o P r o p s , m a p D i s p a t c h T o P r o p s , M y C o m p o n e n t ) ;
  7. Thunks Los Thunks son Asynchronous action creators y como su

    nombre indica nos permitiran realizar (y retornar) funciones asincronicas desde nuestras acciones. Esto es muy util ya que queremos poder realizar una peticion al servidor desde una de una accion de la misma manera que dispatcheamos el resto de nuestras acciones. En los thunks ya no devolvermos un objeto simple sino una funcion. c o n s t A c t i o n s = { G r e e t : ' G r e e t ' / / s e p a r a r e s t o f a c i l i t a c a m b i o s f u t u r o s } ; / / n u e s t r a a c t i o n a h o r a r e t o r n a r a u n a f u n c i o n ( v e a s e l a m b d a s ) c o n s t g r e e t = ( n a m e ) = > ( d i s p a t c h ) = > { / / l o s t h u n k s r e c i b e n d i s p a t c h / / p o d r i a m o s h a c e r u n f e t c h ( ) e n e s t e p u n t o d i s p a t c h ( { t y p e : A c t i o n . G r e e t , p a y l o a d : n a m e / / p a y l o a d p u e d e s e r l o q u e q u e r a m o s ( i n c l u s i v e n o e x i s t i r ) } ) ; } d i s p a t c h ( g r e e t ( ' P i k a c h u ' ) ) ; Los thunks requieren ser configurados a traves de un middleware: https://github.com/gaearon/redux-thunk