Slide 1

Slide 1 text

Angular + NGRX Dev Fest 2018 Alfredo Bonilla

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

¿Qué es NGRX? Es una librería que nos permite implementar Redux en nuestra aplicación Angular por medio de RxJS.

Slide 4

Slide 4 text

¿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…

Slide 5

Slide 5 text

La solución • Una única fuente de la verdad, predecible y con estructuras de datos imutables.

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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”.

Slide 8

Slide 8 text

Store extiende la clase Observable…

Slide 9

Slide 9 text

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.

Slide 10

Slide 10 text

Patrón Flux Action Reducer Store UI Action

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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.

Slide 13

Slide 13 text

Ejemplo de un estado

Slide 14

Slide 14 text

Un reducer se ve así…

Slide 15

Slide 15 text

¿Cómo instalar NGRX? • npm install @ngrx/store --save • npm install @ngrx/[email protected] --save

Slide 16

Slide 16 text

Veamos un ejemplo funcionando • https://github.com/brolag/angular_ngrx

Slide 17

Slide 17 text

Muchas gracias @brolag