Comment utiliser les observables en Reactjs ?

Les observables sont une fonctionnalité typiquement utilisée pour gérer des flux de données asynchrones. ReactJS n’utilise pas nativement les observables, mais ils peuvent être utilisés à travers des bibliothèques comme Redux Observable, RxJS ou Mobx.

Voici comment vous pouvez utiliser les observables dans ReactJS :

1. Installation de la bibliothèque correspondante : Pour utiliser les observables avec ReactJS, vous devrez d’abord installer une bibliothèque comme RxJS avec npm (Node Package Manager) en utilisant la commande suivante : `npm install rxjs`.

1. Création d’un Observable : Une fois que vous avez installé la bibliothèque, vous pouvez créer des observables. Un observable est une fonction qui prend en paramètre un `observer` et renvoie une fonction de suppression.

```
import { Observable } from ‘rxjs’;

let observable = new Observable(observer => {

// Envoi d’une information à l’observer observer.next(‘Hello World’); // Fin de la transmission observer.complete();

});
```

1. Utilisation d’un Observable : Maintenant que vous avez créé un Observable, vous pouvez vous y abonner pour recevoir les informations qu’il envoie avec la méthode `.subscribe()`.

```
observable.subscribe(value => console.log(value)); // ‘Hello World‘
```

1. Utlisation avec React : En React, vous pouvez vous abonner à un observable dans la méthode `componentDidMount` de votre composant et vous désabonner dans la méthode `componentWillUnmount`.

```
class MyComponent extends React.Component {

componentDidMount() { this.subscription = observable.subscribe(value => this.setState({value})); } componentWillUnmount() { this.subscription.unsubscribe(); } render() { return

{this.state.value}

} } ```

Remarque : N’oubliez pas de toujours vous désabonner de vos observables lorsque vous n’en avez plus besoin pour éviter les fuites de mémoire.

1. Combinaison d’observables : Les bibliothèques comme RxJS fournissent des opérateurs puissants pour combiner, créer et manipuler des observables. Par exemple, vous pouvez combiner plusieurs observables en un seul ou transformer les données envoyées par un observable.

```
import { Observable } from ‘rxjs’;
import { map } from ‘rxjs/operators’;

let observable1 = new Observable(observer => { /* … */ });
let observable2 = new Observable(observer => { /* … */ });
let combined = observable1.pipe(map(data => /* Transform data */ ));
```

Une fois que vous avez mis en place les observables, vous pouvez les utiliser pour gérer des flux de données asynchrones complexes dans votre application ReactJS.