5. Programmation réactive et bibliothèque NgRx
5.1 Programmation réactive et observables
Angular intègre les principes du paradigme de la programmation réactive via l’utilisation de la bibliothèque RxJs. Initiée du patron de conception « observateur », la programmation réactive, telle qu’implémentée dans cette bibliothèque, permet de scruter des flux de données (des observables), et à chaque fois qu’une donnée est reçue dans un flux, d’invoquer un traitement à effectuer.
Revenons sur la classe TypeScript gérant le composant Produits contenu dans le fichier produits.component.ts. Nous avons vu que le constructeur de cette classe créait une variable nommée produitsService de type ProduitsService :
…
import { ProduitsService } from '../produits.service';
export class ProduitsComponent implements OnInit {
private produits: Object[] = new Array();
constructor(private produitsService: ProduitsService) { }
ngOnInit() {
this.produitsService.getProduits().subscribe(produits => {
this.produits = produits;
});
}
}
Dès sa création (dans la méthode ngOnInit() ), ce composant s’abonne au flux de données renvoyé par la méthode getProduits() du service produitsService qu’il utilise.
Ainsi dès que les informations sur les produits en vente sont renvoyées par la méthode getProduits () (qui elle-même a invoqué le service http d’Angular), ces informations sont recopiées dans la structure de données produits qui est utilisée dans le template associé à ce composant pour mettre à jour l’interface (figure 5).
En relation avec le code précédent, voici un extrait du code de la classe ProduitsService qui met en œuvre la classe HttpClient pour établir une connexion avec le serveur Node.js et récupérer des données dans un observable :
QUIZ ET TEST DE VALIDATION PRÉSENTS DANS CET ARTICLE
