Angular + NGRX Dev Fest 2018 Alfredo Bonilla

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

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

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

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

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

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

Store extiende la clase Observable…

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.

Patrón Flux Action Reducer Store UI Action

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

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.

Ejemplo de un estado

Un reducer se ve así…

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

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

Muchas gracias @brolag