Migrating subscribe Callbacks to subscribe arguments in RxJS

You, the person who uses rxjs in your daily life, may have noticed that since version 6.4. RxJS placed a deprecated annotation in the subscribe:

method

@deprecated — Instead of passing separate callback arguments, use an observer argument. Signatures taking separate callback arguments will be removed in v8. Details: https://rxjs.dev/deprecations/subscribe-arguments

The justification is that using separate callbacks generates worse reading of the method, and therefore it is preferable to use subscribe arguments, destructuring the properties that the method returns.

To better understand what this looks like in practice, let's look at a quick example:

data.js

import { Observable } from "rxjs";

/**
 * Cria um observable que emite valores numéricos de 1 até 5, e então se finaliza.
 *
 * @returns {Observable<number>} Um observable que emite números de 1 até 5 em sequência.
 */
export const data = () => {
  return new Observable((observer) => {
    for (let i = 1; i <= 5; i++) {
      observer.next(i);
    }

    observer.complete();
  });
};

/**
 * Cria um observable que emite um error imediatamente
 *
 * @returns {Observable<never>} Um observable que emite um erro.
 */
export const dataWithError = () => {
  return new Observable((observer) => {
    observer.error("Aconteceu um erro!");
  });
};

This will be our base file. The first method outputs numbers from 1 to 5 in sequence with the .next(); method, and as soon as the loop is finished, the observable is completed with the .complete(); method.

The second method creates an observable that throws an error immediately

PS: when the .error() method is called, the observable stops emitting values ​​and cannot continue emitting values ​​via .next() or be completed with .complete().

And let's get to the point.

We will use as a first example the way that is currently deprecated, and then I will show how to use the observable argument.

import { data, dataWithError } from "./data.js";

data().subscribe(
  (value) => console.log(value),
  (error) => {},
  () => {
    console.log("completou");
  }
);

dataWithError().subscribe(
  () => {},
  (error) => {
    console.error({ error });
  }
);

Note that because it is an example it is something more visible, but at the same time, we need to know the order of each callback (next, error and complete).

That said, let's get to how to use argument observables:

import { data, dataWithError } from "./data.js";

data().subscribe({
  next: (data) => console.log(data),
  complete: () => console.log("completou"),
});

dataWithError()
    .subscribe({ error: (error) => console.error({ error })
    });

From this point on with the argument observables, we have a cleaner reading of what we are using within the subscribe method, not needing to declare callbacks or arguments that we will not use.

It is an easy migration to perform, and will leave your code without deprecation messages for this API.

The above is the detailed content of Migrating subscribe Callbacks to subscribe arguments in RxJS. For more information, please follow other related articles on the PHP Chinese website!