Vainilla Redux

This a presentation (in Spanish) to explain how Redux can be built with no extra dependency only the ones needed by Angular.

Repo:
https://github.com/mahcr/vainilla-redux

Video:
https://youtu.be/P974uIgWmjc?t=401

Transcript

1. Vainilla Redux
2. Hola! Soy Mariano Álvarez Web Practice Lead - Gorilla Logic Co-Organizador Angular Costa Rica Twitter @malvarezcr 2
3. Antes de iniciar https://github.com/mahcr/vainilla-redux 3
4. Redux Iniciemos por lo básico, ¿Qué es? ¿Cómo se come? 1
5. “ Es un contenedor de estado predecible para aplicaciones en Javascript 5
6. ¿Porque Redux? 6 A M Y S D K N L C O R E H T
7. Conceptos Basicos 7
8. Actions Objeto plano que describe la acción Dispatch Función encargada de lanzar acciones Reducers Especifica cambio que debe realizarse según la acción Store Contenedor de estado de la aplicación Terminos 8
9. Flujo de datos 9
10. 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
11. Pros Facil de “debuggear” Separación de capa visual Mantenimiento / Escalabilidad Pros Cons Cons Curva de aprendizaje ❌ Cantidad de código 11
12. ¿Debería utilizarlo? • Aprendizaje • Tamaño de app • Complejidad de app 12
13. Vainilla Redux No dependencias, no NgRx 2
14. 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
15. Demo time 15
16. @nanux/store 16
17. Conclusión 17
18. Links Example Stackbliz https:/ /github.com/mahcr/vainilla-redux @nanux/store https:/ /github.com/mahcr/nanux 18
19. Comunidad 19 @angularcostarica @angularcr
20. 20 ¡Gracias! ¿Preguntas? Mi twitter @malvarezcr