Cómo utilizar el operador takeUntil RxJS para gestionar suscripciones de forma declarativa

Introducción

Angular se encarga de la cancelación de la suscripción a suscripciones observables, como las que se devuelven desde el servicio HTTP o cuando se utiliza la tubería asíncrona . Sin embargo, en otras situaciones, puede resultar difícil gestionar todas las suscripciones y asegurarse de cancelar la suscripción a aquellas que tienen una larga vida útil. Una política de cancelación de la suscripción a la mayoría de las suscripciones también tendrá sus propios problemas.

En este artículo, se le presentará un ejemplo de aplicación Angular que se basa en suscripciones y cancelaciones manuales. Luego, la comparará con un ejemplo de aplicación Angular que utiliza el takeUntiloperador para administrar suscripciones de forma declarativa.

Prerrequisitos

Si deseas seguir este artículo, necesitarás:

• Será beneficioso tener cierta familiaridad con la biblioteca RxJS , en particular .ObservableSubscription
• Será útil tener cierta familiaridad con Apollo y GraphQL, pero no es obligatorio.

Este tutorial se verificó con Node v15.3.0, npmv6.14.9, @angular/corev11.0.4, rxjsv6.6.3, apollo-angularv2.1.0, graph-tagv2.11.0. Este artículo se editó para reflejar los cambios en la migración desde versiones anteriores de @angular/corey rxjs.

Cancelación manual de la suscripción

Comencemos con un ejemplo en el que cancelarás manualmente la suscripción a dos suscripciones.

En este ejemplo, el código se suscribe a un ApollowatchQuery para obtener datos de un punto final GraphQL.

El código también crea un intervalo observable al que te suscribes cuando onStartIntervalse llama a un método.

import { Component, OnInit, OnDestroy } from '@angular/core';import { Subscription, interval } from 'rxjs';import { Apollo } from 'apollo-angular';import gql from 'graphql-tag';@Component({ ... })export class AppComponent implements OnInit, OnDestroy {  myQuerySubscription: Subscription;  myIntervalSubscription: Subscription;  constructor(private apollo: Apollo) {}  ngOnInit() {    this.myQuerySubscription = this.apollo.watchQueryany({      query: gql`        query getAllPosts {          allPosts {            title            description            publishedAt          }        }      `    })    .valueChanges    .subscribe(({data}) = {      console.log(data);    });  }  onStartInterval() {    this.myIntervalSubscription = interval(250).subscribe(value = {      console.log('Current value:', value);    });  }  ngOnDestroy() {    this.myQuerySubscription.unsubscribe();    if (this.myIntervalSubscription) {      this.myIntervalSubscription.unsubscribe();    }  }}

Ahora imagine que su componente tiene muchas suscripciones similares: puede convertirse rápidamente en un proceso bastante complicado garantizar que todas las suscripciones se cancelen cuando se destruye el componente.

Darse de baja declarativamente contakeUntil

La solución es componer las suscripciones con el takeUntiloperador y utilizar un tema que emita un valor verdadero en el ngOnDestroy gancho del ciclo de vida .

El siguiente fragmento hace exactamente lo mismo, pero esta vez el código cancelará la suscripción de forma declarativa. Notarás que un beneficio adicional es que ya no necesitas mantener referencias a nuestras suscripciones.

import { Component, OnInit, OnDestroy } from '@angular/core';import { Subject, interval } from 'rxjs';import { takeUntil } from 'rxjs/operators';import { Apollo } from 'apollo-angular';import gql from 'graphql-tag';@Component({ ... })export class AppComponent implements OnInit, OnDestroy {  destroy$: Subjectboolean = new Subjectboolean();  constructor(private apollo: Apollo) {}  ngOnInit() {    this.apollo.watchQueryany({      query: gql`        query getAllPosts {          allPosts {            title            description            publishedAt          }        }      `    })    .valueChanges    .pipe(takeUntil(this.destroy$))    .subscribe(({data}) = {      console.log(data);    });  }  onStartInterval() {    interval(250)    .pipe(takeUntil(this.destroy$))    .subscribe(value = {      console.log('Current value:', value);    });  }  ngOnDestroy() {    this.destroy$.next(true);    this.destroy$.unsubscribe();  }}

Observe cómo el uso de un operador como takeUntilen lugar de cancelar la suscripción manualmente también completará el observable, lo que activará cualquier evento de finalización en el observable.

Asegúrese de revisar su código para asegurarse de que esto no cree efectos secundarios no deseados.

Conclusión

En este artículo, aprendiste a usar takeUntilla cancelación de suscripción de forma declarativa. La cancelación de suscripción de suscripciones innecesarias contribuye a prevenir fugas de memoria. La cancelación de suscripción de forma declarativa te permite no requerir referencias a las suscripciones.

Hay otros operadores RxJS similares take, como takeWhile, y first, que completarán el observable.

Si desea obtener más información sobre Angular, consulte nuestra página de temas de Angular para ver ejercicios y proyectos de programación.