Les observables sur React : C’est quoi ?

Sommaire

1. Qu’est-ce qu’un observable ?
2. Fonctionnement
3. Installation et configuration
4. Que sont les opérateurs ?
5. Conclusion

Avant de commencer

Si vous souhaitez maîtriser cet outil, vous pouvez suivre notre formation React. Cette formation vous permettra d’optimiser vos performances web, créer des composants Web complexes et développez des applications Web.

L’équipe Ambient IT

Qu’est-ce qu’un observable ?

Un observable désigne un objet qui envoie les informations nécessaires auxquelles nous voulons répondre. Pour illustrer ce modèle, c’est comme la radio. Avec une radio, vous syntonisez une station pour recevoir un flux constant de musique ou d’informations. Les observables fonctionnent exactement de la même manière. Les informations proviennent soit d’un champ de texte, dans lequel l’utilisateur saisit des données, soit de la progression d’un téléchargement de fichier ou alors de la communication avec le serveur.

Avec leur nature prédictible et leur gestion fluide des événements, les observables offrent une alternative intéressante aux patterns classiques. Ils sont fondamentaux dans le paradigme de la programmation réactive, ils s’implémentent dans différents langages et bibliothèques telles que RxJS, RxJava ou ReactiveX.

Fonctionnement

À quoi sert leur utilisation ?

La gestion de l’état et le traitement des données asynchrones peuvent dans certains cas constituer un défi. C’est à ce moment précis, que les observables interviennent, ils vont aider à gérer les changements d’état complexes ainsi que les évènements asynchrones de manière plus prévisible.

Props et State vs Observables : Quelles Différences ?

Si les props et le state sont les boussoles de React, alors les observables en sont les satellites. Ils offrent une vue d’ensemble, permettant de suivre des événements sur toute l’application et pas seulement au sein d’un composant.

Observables et Promises : Qu’est-ce qui Change ?

Alors que les Promises sont des contrats d’un seul coup, les observables sont des souscriptions à long terme. Une Promise se résout une fois, mais un observable peut émettre des données à l’infini, tant que vous êtes abonné.

Installation et Configuration

Pour utiliser les observables, vous devez installer le rxjs package. Il vous fournira un ensemble d’outils pour créer et travailler avec des observables.

Comment installer RxJS ?

npm install rxjs

Trois mots, une commande et votre projet est équipé pour entrer dans la dimension réactive des observables.

Par la suite, vous pouvez importer le Observable classe et commencer à l’utiliser dans votre code :

import { Observable } from 'rxjs';

Comment créer un Observable en React ?

Pour créer un Observable, il suffit de définir ce que vous observez avec Observable.create et en transmettant une fonction d’abonnement :

const observable = Observable.create(observer => {
  observer.next('Hello, World!');
});

Dans ce cas, on observe que l’observable émet la valeur « Hello, World ». La méthode observer.next est utilisée pour émettre une valeur à partir de l’observable.

Il est possible d’émettre autant de valeur que vous voulez, la seule condition est qu’elles ne doivent pas être du même type. Par exemple :

const observable = Observable.create(observer => {
  observer.next('Hello, World!');
  observer.next(42);
  observer.next({ name: 'Alice' });
});

S’abonner à un observable

Pour cela, il suffit d’appeler la subscribe méthode sur l’observable, puis de transmettre un objet observateur :

observable.subscribe({
  next: value => console.log(value),
});

L’objet observateur possède une seule méthode, next, qui est appelée chaque fois que l’observable émet une valeur

Se désabonner d’un observable

Afin de ne plus recevoir de valeur, il est possible de se désabonner. La méthode unsubscribe permet d’arrêter de recevoir les valeurs. Voici l’exemple :

const subscription = observable.subscribe({
  next: value => console.log(value),
});

subscription.unsubscribe();

On observe que l’objet d’abonnement est stocké dans une variable et l’unsubscribe a été appelé. Après cela, l’observateur ne recevra plus aucune valeur de l’observable.

Utilisation des observables

Il existe une solution consistant à s’abonner à l’observable dans la componentDidMount méthode du cycle de vie et ensuite à se désabonner dans la componentWillUnmount méthode. Un exemple :

import React from 'react';
import { Observable } from 'rxjs';

class MyComponent extends React.Component {
  componentDidMount() {
    this.observable = Observable.create(observer => {
      observer.next('Hello, World!');
    });

    this.subscription = this.observable.subscribe({
      next: value => console.log(value),
    });
  }

  componentWillUnmount() {
    this.subscription.unsubscribe();
  }

  render() {
    return <div>My Component</div>
  }
}

Dans l’exemple ci-dessus, un observable a été créé pour le faire s’abonner dans la première méthode et ensuite le désabonner dans la seconde méthode.

Que sont les opérateurs ?

Il s’agit de la méthode .pipe() qui est utilisée pour composer des fonctionnalités grâce à l’aide de fonctions d’opérateur. Elle prend une ou plusieurs fonctions d’opérateur en renvoyant un nouvel observable qui transmet chacune de ses valeurs futures via les opérateurs. Afin de comprendre, imaginons un observable de pages de lecture :

const page$ = new Observable<Page>(subscriber => {
   setInterval(() => {
     fetch('/api/page')
       .then(subscriber.next)
       .catch(subscriber.error);
   }, 1000);
 })

Avec la méthode .pipe() et quelques fonctions d’opérateur, il est possible de transformer page$ en un observable qui produit différentes valeurs :

import { distinctUntilChanged, map, startWith } from 'rxjs' ;

const isOnline$ = page$.pipe(
  map(page => page.activityState === 'active'),
  starWith(false),
  distinctUntilChanged()
)

Trois lignes de code ont permis de créer un nouvel isOnline$ observable qui émet une valeur booléenne en indiquant si l’utilisateur est en ligne.

Conclusion

L’utilisation des Observables en React, c’est choisir un outil réactif et puissant pour gérer des flux de données complexes. C’est une option à envisager lorsque les méthodes traditionnelles montrent leurs limites. Ils offrent aux développeurs React une manière élégante et puissante de gérer l’état et les données asynchrones en ouvrant la porte à des applications plus réactives et mieux structurées.