Vainilla Redux - Speaker Deck

Slide 1

Slide 1 text

Vainilla Redux

Slide 2

Slide 2 text

Hola! Soy Mariano Álvarez Web Practice Lead - Gorilla Logic Co-Organizador Angular Costa Rica Twitter @malvarezcr 2

Slide 3

Slide 3 text

Antes de iniciar https://github.com/mahcr/vainilla-redux 3

Slide 4

Slide 4 text

Redux Iniciemos por lo básico, ¿Qué es? ¿Cómo se come? 1

Slide 5

Slide 5 text

“ Es un contenedor de estado predecible para aplicaciones en Javascript 5

Slide 6

Slide 6 text

¿Porque Redux? 6 A M Y S D K N L C O R E H T

Slide 7

Slide 7 text

Conceptos Basicos 7

Slide 8

Slide 8 text

Actions Objeto plano que describe la acción Dispatch Función encargada de lanzar acciones Reducers Especiﬁca cambio que debe realizarse según la acción Store Contenedor de estado de la aplicación Terminos 8

Slide 9

Slide 9 text

Flujo de datos 9

Slide 10

Slide 10 text

Principios ⚡ Un solo estado de la verdad El estado solo se puede leer - es inmutable Solo se actualiza el estado a través de acciones 10

Slide 11

Slide 11 text

Pros Facil de “debuggear” Separación de capa visual Mantenimiento / Escalabilidad Pros Cons Cons Curva de aprendizaje ❌ Cantidad de código 11

Slide 12

Slide 12 text

¿Debería utilizarlo? ● Aprendizaje ● Tamaño de app ● Complejidad de app 12

Slide 13

Slide 13 text

Vainilla Redux No dependencias, no NgRx 2

Slide 14

Slide 14 text

Service Encargado de contener la lógica del manejo del store Dispatcher Entidad encargada de lanzar las actiones Store Objeto que almance el estado Facades Pattern Patrón de diseño que “esconde” la complejidad ¿Que necesitamos? 14

Slide 15

Slide 15 text

Demo time 15

Slide 16

Slide 16 text

@nanux/store 16

Slide 17

Slide 17 text

Conclusión 17

Slide 18

Slide 18 text

Links Example Stackbliz https:/ /github.com/mahcr/vainilla-redux @nanux/store https:/ /github.com/mahcr/nanux 18