Reactividad y Manejo de Estado en Angular con NGRX

Curso de Angular: Componentes y Servicios

Contenido del curso

Componentes

Servicios

Pipes y Directives

Best practices

Despedida

20
Componentes y Servicios en Aplicaciones Web
01:09 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:0014:51

Reactividad y Manejo de Estado en Angular con NGRX

Curso de Angular: Componentes y Servicios

Clase 18 de 20

Clase 18 / 20

Recursos

El concepto de reactividad básica es muy importante en el desarrollo front-end. Se trata del estado de la aplicación con respecto al valor de los datos en cada componente, cómo estos cambian a medida que el usuario interactúa y cómo se actualiza la interfaz.

Problemas en la comunicación de componentes

Cuando pensamos en cómo comunicar un componente padre con su hijo y viceversa, solemos utilizar los decoradores @Input() y @Output().

Pero muchas veces, en aplicaciones grandes, la comunicación de componentes se vuelve mucho más compleja y estas herramientas no alcanzan cuando se necesita enviar información de un componente ""hijo"" a uno ""abuelo"".

Solución a la comunicación de componentes

Es recomendable implementar un patrón de diseño para mantener el estado de la aplicación centralizado en un único punto, para que todos los componentes accedan a ellos siempre que necesiten. A este punto central se lo conoce como Store.

{height="""" width=""""}

Implementando un store de datos

Los store de datos suelen implementarse haciendo uso de Observables.

Paso 1: Importa la clase BehaviorSubject desde la librería RxJS, que te ayudará a crear una propiedad observable, a la cual tu componente pueda suscribirse y reaccionar ante ese cambio de estado.

// services/store.service.ts
import { BehaviorSubject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class StoreService {

  private myShoppingCart: Producto[] = [];
  private myCart = new BehaviorSubject<Producto[]>([]);
  public myCart$ = this.myCart.asObservable();

  constructor() { }

  addProducto(producto: Producto): void {
    // El observable emitirá un nuevo valor con cada producto que se agregue al carrito.
    this.myShoppingCart.push(producto);
    this.myCart.next(this.myShoppingCart);
  }

}

Paso 2: Suscribe a cualquier componente que necesites a estos datos, para reaccionar cuando estos cambian.

// components/nav-bar/nav-bar.component.ts
import { StoreService } from 'src/app/services/store.service';
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-nav-bar',
  templateUrl: './nav-bar.component.html',
  styleUrls: ['./nav-bar.component.scss']
})
export class NavBarComponent implements OnInit, OnDestroy {

  private sub$!: Subscription;

  constructor(
    private storeService: StoreService
  ) { }

  ngOnInit(): void {
    this.storeService.myCart$
      .subscribe(data => {
        // Cada vez que el observable emita un valor, se ejecutará este código
        console.log(data);
      });
  }
  
  ngOnDestroy(): void {
    this.sub$.unsubscribe();
  }

}

El lugar más apropiado para esto es en ngOnInit(). No olvides guardar este observable en una propiedad del tipo Subscription para hacer un unsubscribe() cuando el componente sea destruido.

NOTA: Por convención, las propiedades que guardan observables suelen tener un ""$"" al final del nombre para indicar que se trata de un observable.

Ver código fuente del proyecto

Contribución creada con los aportes de Kevin Fiorentino.

Daniel Meza

Hace 5 años

Algo super importante cuando existen subscripciones a observables que no son de http o de route (que por sí mismas se destruyen), es que debemos manejar su destrucción del componente. Esto porque puede generar un memory leak.

Yo creé un método que realizara la suscripción y la retornara para manejarla.

getMyCartLength(): Subscription {
    return this._storeService.myCart$
      .subscribe(products => {
        this.counter = products.length;
      });
  }

Y dentro del onInit() la almaceno en una variable o arreglo (en caso que deba manejar más de una subscripción a observables) de tipo Subscription. Ej:

ngOnInit(): void {

    // Si se tendrán más subscripciones
    this.subscriptions = [
      this.getMyCartLength()
    ]

    // Manejar una sola subscripción
    this.subscription = this.getMyCartLength()
  }

Todo esto, para que cuando el componente de desmonte, y se ejecute el método onDestroy() del ciclo de vida. También destruya las subscripciones que tiene activas.

ngOnDestroy(): void {

    // Si se tendrán más subscripciones
    this.subscriptions.forEach(sub => {
      if (sub !== null) {
        sub.unsubscribe()
      }
    });

    // Manejar una sola subscripción
    this.subscription ? this.subscription.unsubscribe() : null;

  }

José Rafael Ramírez Zavaleta

Hace 5 años

Excelente aporte

Diego Fernando Caviedes Camaho

Hace 4 años

como declararías el array de tipo subscriptions?

Comentarios (59)59 comentarios

Alex Leonardo Rodriguez Carvajal

José Pablo Jiménez Cucanán

Sebastian Sanmartin

Niller David Yanes Diaz

Randy Guerra

Diego Jurado

Hace 3 años

Malena Lucero

Mariano Tribuj

Victor Manuel Franco Cañon

Mateo Costa

Sebastian Arrieta Villarreal

Cecilia Riveros

Jimmy Buriticá Londoño

William Armando Forero Bermeo

Obed Paz

Sergio Andrés Bolaños Penagos

Gabriel Diaz

moises mannarino

David Castro

Kevin Zavala

Andres López

Vsqz Gabriel

Luis Abdel Rangel Castro

Sergio Ramirez

emely dayanna tarazona perez

Nicolas Molina

Profesor

Donny Daniel Vásquez Ramos

Componentes

Desarrollo de Tienda Online con Angular Avanzado

Creación y Gestión de Componentes en Angular

Comunicación de Componentes: Envío de Datos con Inputs en Angular

Comunicación de Eventos entre Componentes en Angular

Creación y Reutilización de Componentes en Angular para Tiendas

Ciclo de Vida de Componentes en Angular: Constructor a OnDestroy

Manejo de eventos y limpieza en Angular con ngOnDestroy y setters

Componentes en Angular: Creación y Organización de Productos

Estilos en Angular: Alcance y Maquetación de Componentes

Despliegue Dinámico de Menú Lateral en Angular

Comunicación Padre-Hijo con Inputs y Outputs en Angular

Servicios

Creación y uso de servicios en Angular para lógica de negocio

Inyección de Dependencias en Angular: Conceptos y Funcionamiento

Conexión a APIs usando HTTP Client Module en Angular

Pipes y Directives

Uso de Pipes en Angular: Transformación y Formatos

Creación de Pipes Personalizados en Angular

Creación y Uso de Directivas en Angular para Manipular el DOM

Best practices

Reactividad y Manejo de Estado en Angular con NGRX

Implementación de Linter en Angular para Buenas Prácticas de Código

Despedida

Componentes y Servicios en Aplicaciones Web

Reactividad y Manejo de Estado en Angular con NGRX

Progreso del curso

Componentes

Servicios

Pipes y Directives

Best practices

Despedida

Recursos

Recursos