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

Angular + NGRX

Angular + NGRX

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

8dbca2c5e7e0296afd964af7d1f7b55e?s=128

Alfredo Bonilla

November 05, 2018
Tweet

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