Angular 19 : Découvrez rxResource() – La Fusion Parfaite entre RxJS et les Signaux !
Si vous utilisez Angular, vous avez probablement déjà jonglé entre RxJS et la gestion manuelle des états (loading, error…).
Avec rxResource(), Angular 19 propose une API expérimentale qui pourrait changer la donne !
👉 Objectif ? Fusionner la puissance des Observables et la réactivité native des signaux pour un code plus fluide et plus intuitif.
Qu’est-ce que rxResource() ?
→ Nouvelle API expérimentale introduite dans Angular 19
→ Combine RxJS et les signaux pour simplifier la gestion des données asynchrones
→ Récupère les données via Observables tout en bénéficiant de la réactivité automatique des signaux
→ Gère automatiquement l’état (loading, error, success), supprimant le code répétitif
Les Avantages de rxResource()
→ Fusion entre RxJS et les signaux : plus de fluidité dans la gestion réactive des données
→ Moins de code boilerplate : pas besoin de subscribe(), ni de gestion manuelle des états
→ Mises à jour automatiques : dès qu’une dépendance change, les données sont recalculées
→ Interopérabilité fluide avec HttpClient et les Observables déjà existants
Fonctionnalités clés
→ Convertit automatiquement les Observables en signaux
→ Gère l’état sans effort → plus besoin de gérer loading et error manuellement
→ Optimisé pour les mises à jour réactives → pas de re-render inutiles
→ Compatible avec HttpClient et d’autres sources de données asynchrones
💡Exemple : Charger un produit selon son ID avec rxResource()
Je vous ai mis l’exemple dans la capture d’écran pour plus de clareté ;)
→ Résultat ?
Dès que id() change, product est mis à jour automatiquementPas besoin de subscribe(), tout est géré sous le capotCode plus clair et plus concis
⚠️ Points d’attention
→ API expérimentale → encore en test, elle peut évoluer dans les futures versions d’Angular
→ Ne remplace pas totalement RxJS → rxResource() est idéal pour intégrer les Observables aux signaux, mais RxJS reste puissant pour d'autres cas
→ Adaptation nécessaire → si votre projet est fortement basé sur RxJS ou NgRx, il faudra tester son intégration
Conclusion : Une Approche Réactive et Intuitive
Avec rxResource(), Angular 19 rapproche les signaux et RxJS, rendant la gestion des données plus fluide et naturelle.
→ Moins de code
→ Mises à jour automatiques
→ Interopérabilité avec RxJS
💬 Alors, êtes-vous prêt à tester rxResource() ? Dites-moi en commentaire ce que vous en pensez !
Super post !
Petite question, pourquoi réaliser des computed sur l'erreur et la value, sachant que ces signaux sont directement accessibles via productResource ?