Créez des applications réactives avec Signals, RxJS et Angular 17

avril 15, 2024

Avec Signals stable dans Angular 17, nous pouvons créer des applications réactives sans RxJS, ou combiner RxJS avec Signals. Nous allons jeter un coup d’oeil!

Si vous envisagez de créer une nouvelle application avec Angular 17, avec ou sans architecture sans module, il est crucial de prêter attention à une fonctionnalité puissante d’Angular pour créer des applications réactives : les signaux angulaires. Ils nous aident à créer des interfaces utilisateur plus dynamiques et réactives sans code complexe, ce qui facilite la gestion de l’état et des comportements des applications.

En savoir plus sur Les nouvelles fonctionnalités d’Angular 17.

De nos jours, nous utilisons souvent RxJS pour créer des applications réactives. RxJS est génial, mais parfois cela peut être excessif, comme utiliser un camion pour voyager au lieu d’une voiture.

L’équipe Angular connaît bien cette situation. Lorsqu’un nouveau développeur commence avec Angular, RxJS peut être puissant mais complexe, avec une grande API comprenant de nombreux opérateurs, canaux et observables, avec lesquels il peut prendre du temps pour se sentir « en confiance ».

Maintenant, dans la version 17, nous avons Signals en version stable ! Ainsi, nous pouvons créer des applications réactives sans RxJS, ou combiner RxJS avec Signals. 😏

RxJS va-t-il disparaître ou devenir un héritage ?

Non, RxJS fait partie d’Angular. Nous avons des formulaires réactifs, des signaux en HTTP et RxJS nous aide beaucoup lorsque nous devons travailler avec des données et des événements asynchrones. Les signaux sont très bénéfiques pour RxJS, car vous utiliserez RxJS lorsque cela est vraiment nécessaire, ou combinerez les deux pour tirer le meilleur parti des deux mondes.

Que sont les signaux angulaires ?

Les signaux angulaires représentent une nouvelle façon de créer des applications réactives, construites sur des primitives réactives qui émettent des mises à jour lorsque leurs valeurs sous-jacentes changent.

Un signal est comme un conteneur qui contient une valeur (comme un nombre ou une chaîne) et informe les autres parties de votre application lorsque cette valeur change. Lorsque vous utilisez un signal, Angular le surveille afin de savoir exactement quand et comment il est utilisé.

L’API Signals est une API petite et facile à utiliser, avec trois primitives réactives principales, pour indiquer à Angular quand et où les données changent.

Les trois sont :

Signaux inscriptibles : ce sont des signaux que vous pouvez modifier. Par exemple, si vous avez un signal pour un numéro, vous pouvez augmenter ou diminuer ce numéro.
Signaux calculés : Leur valeur dépend d’autres signaux. Si le signal dont ils dépendent change, ils changent aussi.
Effets : ce sont des fonctions spéciales qui réagissent lorsque les valeurs du signal changent.

Je pense que la meilleure façon de se mettre sur la bonne voie est d’utiliser un peu de code, alors faisons-le.

Créer des signaux

Avant de commencer, un signal est une variable qui contient une valeur, créée par le signal() fonction et fournit des méthodes pour interagir avec elle.

Créons notre premier signal :

$message = signal<string>('Hello from Signal');

Pour lire la valeur du signal de message, nous utilisons (). Par exemple, pour lire le message dans le modèle :

 <h1>
    {{message()}}
</h1>

Ou dans un fichier TypeScript :

 if (message().length > 0) {
    console.log("I have a message");
}

Nous pouvons également définir une valeur ou la mettre à jour, en utilisant les méthodes set et update.

set(): Attribue une nouvelle valeur au signal. Exemple:

   message.set('You got a new message');
  message();

update(): Modifie la valeur en fonction de l’état précédent.

   message.update((p) => `${p} !!😁`);
  message();

Signaux calculés

Calculé : signal qui calcule sa valeur ou son état à partir d’autres signaux, en se mettant à jour de manière réactive.

Exemple:

 userName = signal('dany');
congratsUser = computed(() => 'Thanks ' + userName());

En savoir plus sur Signaux.

Effet()

Le effect()La fonction permet d’exécuter des effets secondaires en réponse aux changements d’état. Par exemple, il peut être utilisé pour mettre à jour de manière réactive l’interface utilisateur en fonction des interactions utilisateur qui ne sont pas directement liées à la fonctionnalité principale d’un composant.

Exemple:

 effect(() => {    
    if (userName().length === 3) {
        console.log('You have a userName');
    }
});

En savoir plus sur effet.

Nous avons appris quelques bases sur les signaux. Au lieu de simplement regarder de petits exemples, il vaut mieux apprendre en faisant des choses réelles. Utilisons ce que nous savons des signaux dans une situation réelle. Par exemple, nous pouvons créer une fonctionnalité pour enregistrer nos produits préférés ou effectuer une recherche.

Cela semble difficile ? Pas vraiment! Avec notre compréhension de base des signaux, nous pouvons le faire facilement.

Créer un favori et effectuer une recherche dans une application existante

Nous avons été embauchés pour continuer à construire le kendostore que nous avons ouvert la dernière fois en utilisant Progress Interface utilisateur Kendo pour angulaire. Cette fois, nous devons ajouter de nouvelles fonctionnalités à la boutique de vêtements actuelle : un sélecteur de favoris et un filtre de recherche. Vous devez effectuer les tâches suivantes :

Permettez à l’utilisateur de cliquer sur ses vêtements préférés et de les afficher dans une section.
Activer la suppression des favoris sélectionnés.
Filtrez la liste actuelle des produits en fonction de la recherche d’entrée.

Cloner le projet point de départ.

La fonctionnalité Favoris

Tout d’abord, ouvrez products.component.ts et déclare la variable $favorites comme une gamme de produits utilisant des signaux.

N’oubliez pas d’importer la fonction signal depuis import { signal } from '@angular/core';

$favorites = signal<Product[]>([]);

Ensuite, déclarez deux méthodes, addFavorite et clearFavorites. Dans addFavorites(product: Product)nous passons le produit dans la méthode et utilisons la méthode de mise à jour du signal pour lier les favoris.

 addFavorite(product: Product) {
  this.$favorites.update((p) => [...p, product]);
}

Pour clearFavoritesutiliser set pour attribuer un tableau vide pour effacer les favoris.

 clearFavorites(): void {
  this.$favorites.set([]);
}

Dans le modèle products.component.html, appelez addFavorite avec le produit actuel pour mettre à jour le tableau de signaux du produit.

 <kendo-card-footer class="k-hstack">
    <span>Price {{ product.price | currency }}</span>
    <span (click)="addFavorite(product)">❤</span>
</kendo-card-footer>

Ajoutez le balisage suivant pour afficher la liste des produits favoris. Nous parcourons le tableau favori en utilisant la nouvelle syntaxe angulaire, en suivant par product.idet appelle clearFavorites pour effacer la liste.

 <div class="favorites">
  @for (product of $favorites(); track product.id) {
    <img [src]="product.image" kendoCardMedia alt="cover_img"/>
  }
  <span (click)="clearFavorites()">🗑</span>
</div>

Enregistrez les modifications et cliquez sur l’icône ❤ dans le produit. Cela l’ajoutera à la liste des produits ! Ouais!!

Si vous cliquez sur l’icône de la corbeille, tous les favoris sont supprimés ! Nous créons une fonctionnalité intéressante si facilement !

Continuons avec l’effet « ajouter » à l’application ! 😎

Faire des effets avec effect()

Nous avons appris effect() ce qui nous aide à déclencher des actions lorsque les variables de signal changent, par exemple en mettant à jour l’interface utilisateur pour changer la couleur d’arrière-plan de nos pages lorsque le nombre de favoris atteint trois.

Tout d’abord, ouvrez styles.scss et ajoutez une classe rouge.

.red {
  background-color: red;
}

De retour products.component.tsajouter effect dans le constructeur. Lorsque le nombre de produits favoris atteint trois, ajoutez la classe au corps du document.

Pensez à importer le effectfonction de import { effect } from '@angular/core';

 export class ProductsComponent {
  $favorites = signal<Product[]>([]);

  constructor() {
    effect(() => {
      if (this.$favorites().length >= 3) {
        document.body.classList.add('red');
      }
    });
  }
}

Enregistrez les modifications et ajoutez trois produits, et l’arrière-plan change ! Ouais! Nous avons une application amusante, qui réagit aux changements de signaux !

Nous avons une application réactive déclenchant un effet avec seulement quelques lignes de code. Faisons un autre pas en avant en créant une fonction de recherche. 🔍

Construire une recherche de produits avec RxJS et Signals

Pour la fonctionnalité de recherche de produits, nous combinerons RxJS et les signaux. Mais d’abord, comprenons le toSignal fonction (qui fait partie de RxJS Interop) qui permet de transformer facilement nos observables en signaux et vice versa.

Déclarer le $searchFilter signaler, renommer $products à productsAPIet enveloppez la requête http avec toSignal fonction.

 #http = inject(HttpClient);
private $searchFilter = signal<string>('');
private $productsAPI = toSignal(
  this.#http.get<Product[]>('https://fakestoreapi.com/products')
);

En savoir plus sur Interopérabilité RxJS.

Ensuite, en utilisant le compute fonction pour déclarer la variable $productsle computed réagit aux changements dans $productsAPI tableau et le searchFilter signal.

 $products = computed(() => {
  return this.$productsAPI()?.filter((p) =>
    p.title.toLowerCase().includes(this.$searchFilter()),
  );
});

Créer le updateFilter méthode pour mettre à jour le searchFilter en utilisant le set méthode, basée sur la saisie de l’utilisateur.

 updateFilter(filter: string) {
  const filterValue = filter.length > 3 ? filter : '';
  this.$searchFilter.set(filterValue);
}

Dans le modèle products.component.html, ajoutez une entrée pour la recherche, mettant à jour le searchFilter signal à chaque fois que l’utilisateur tape.

<div class="search">
<h3>Search by Product Name </h3>
<input #filter (input)="updateFilter(filter.value)">
</div>

Oui, nos produits réagissent aux changements ! C’est le pouvoir des signaux, computeset RxJS !

Conclusion

Nous avons créé des fonctionnalités simples et intéressantes en utilisant Angular, avec la puissance de Signals et de RxJS Interop et bien sûr en combinaison avec une application actuelle construite avec Kendo UI.

La combinaison de Signals et de RxJS vous permet de créer des applications agréables et réactives. N’hésitez pas à jouer davantage avec et à le combiner avec l’un des composants Kendo UI pour Angular : vous pouvez essayez cette bibliothèque angulaire gratuitement!

Bon codage !

Source link