Angular + NGRX

Introducción al manejo de estados de una aplicación Angular con NGRX

Transcript

1. Angular + NGRX Dev Fest 2018 Alfredo Bonilla
2. Hola Soy Alfredo Bonilla Desarrollador Web en Gorilla Logic. Colaborador en Costa Rica JS y Dev CR. Entusiasta de las tecnologías de código abierto. Quejas y sugerencias -> @brolag
3. ¿Qué es NGRX? Es una librería que nos permite implementar Redux en nuestra aplicación Angular por medio de RxJS.
4. ¿Cuándo necesito Redux? • Cuando el estado de los componentes está “por todas partes”. • Cuando hay problemas para actualizar el estado. • Cuando el estado se actualiza y nadie sabe porque…
5. La solución • Una única fuente de la verdad, predecible y con estructuras de datos imutables.
6. Conceptos • Store: es el almacén del estado de los datos. • Reducer: una función que toma el estado de los datos y un acción y produce con esto un nuevo estado. • Selector: selecciona una porción del estado de los datos. • Action: es una intención de cambiar el estado de los datos. Tiene un tipo y un “payload”; • Action creator: produce la intención de cambio que puede incluir datos. • Effects: permite manejar las operacions asincronicas de NgRx
7. Store extiende la clase Observable… • Un “observable” es una función que produce un ”stream” o flujo de datos. • Si te suscribes a un ”observable” eres un ”observer”. • Un ”observable” puede tener multiples “observers”.
8. Store extiende la clase Observable…
9. Action extiende la clase BehaviorSubject… • Un “Subject” es un “observable” que puede emitir datos en a varios ”observers” en una misma ejecución. • Un “subject” es un “observer” y un “observable” al mismo tiempo. • Un “BehaviorSubject” almacena el último valor emitido a sus consumidores, y cada vez que se suscriba un nuevo Observer, recibirá inmediatamente el "valor actual" del BehaviorSubject.
10. Patrón Flux Action Reducer Store UI Action
11. Ventajas • Datos globales en la aplicación • Es mas sencillo debuggear • Aislamiento de los datos con respecto a la interfaz • Seguridad sobre el tipado de los datos gracias a TypeScript
12. Desventajas • Es necesario escribir más código. • La curva de aprendizaje es más empinada. • La integración con librerías de terceros se vuelve tediosa. • El rendimiento se puede ver afectado cuando el estado de la aplicación es demasiado grande.
13. Ejemplo de un estado
14. Un reducer se ve así…
15. ¿Cómo instalar NGRX? • npm install @ngrx/store --save • npm install @ngrx/effects@2.0.5 --save
16. Veamos un ejemplo funcionando • https://github.com/brolag/angular_ngrx
17. Muchas gracias @brolag