Formation NgRx
NgRx est une bibliothèque open source pour Angular qui fournit une implémentation de l'architecture Redux pour les applications Angular. Redux est un modèle de gestion d'état qui permet de gérer l'état de votre application de manière centralisée et prévisible. NgRx comprend une série de composants clés tels que les stores, les actions, les reducers et les effects qui travaillent ensemble pour gérer l'état de votre application. Le store est le conteneur principal qui stocke l'état de l'application. Les actions sont des objets qui décrivent ce qui s'est passé dans l'application et qui sont utilisées pour mettre à jour l'état du store. Les reducers sont des fonctions qui prennent en entrée l'état actuel du store et une action, et qui retournent un nouvel état mis à jour en fonction de l'action. Les effects sont des classes qui permettent de déclencher des actions en réponse à des événements externes, tels que des appels API ou des interactions de l'utilisateur. NgRx est conçu pour améliorer la prévisibilité et la stabilité de votre application en centralisant la gestion de l'état et en suivant une série de règles strictes pour la mise à jour de l'état. Cela peut aider à éviter les problèmes courants tels que les effets de bord et les états instables dans les applications Angular. Si vous utilisez NgRx dans votre application, vous devrez configurer et utiliser ces différents composants pour gérer l'état de votre application de manière efficace.
Objectifs pédagogiques
- Revoir les bases d'Angular et NgRx
- Configurer NgRx et les outils de développement
- Comprendre les concepts clés : Actions, Reducers, Selectors
- Gérer les Side Effects avec @ngrx/effects
- Manipuler les données avec @ngrx/entity et @ngrx/data
Pré-requis
- Etre au niveau de notre formation Angular
- Bonnes bases avec RxJS
Public
- Développeurs
- Chefs de projets
Programme
Jour 1
Rappels Angular
- Components et services
- Gestion de state sans Observables
- Récupérer des données via HTTP
- Stateful vs stateless components
- Gestion de state via Observables
Pourquoi NgRx ?
- State management
- Store pattern
- Avantages d'un state immuable
- Pourquoi fonctionner en Observable ?
Bases RxJS
- Observables
- Subjects/BehaviorSubjects
- Opérateurs de création
- Opérateurs de combinaison
- Opérateurs mapping (mergeMap/concatMap/switchMap/exhaustMap)
- Opérateurs de filtrage/transformation
- Gestion d'erreur
Le setup
- Installer NgRx dans un projet
- Ajouter les Schematics
- Redux DevTools
- Router Store
Jour 2
Actions/Reducers
- Concept clef : Action
- Concept clef : Reducer
- Définir les Actions
- Réagir aux Actions avec les Reducers
- Organiser le Store avec des Feature Reducers
Selectors
- Concept clef : Selector
- Rester organisé avec les Feature Selectors
- Créer des Selectors précis
Effects
- Concept clef : Side Effect
- Lancer une requête HTTP
- Créer un CRUD en jonglant Actions, Reducers, Selector et Effects
- Gérer les erreurs
Jour 3
NgRx Entity
- Concept clef : NgRx Entity
- Configurer Entity
- Des collections performantes
- EntityState
- EntityAdapter - création
- EntityAdapter - méthodes
NgRx Data
- NgRx Data pour simplifier NgRx Entity
- Configurer NgRx Data
- Récupérer des données via HTTP (override les méthodes Data)
- Lire dans le Store avec entities$
- Création pessimiste
- Update optimiste
- Suppression optimiste
Méthodes mobilisées
- Un formateur validé par nos équipes techniques et pédagogiques sera présent pendant toute la durée de la formation
- Pour les formations en présentiel, une salle de formation sera mise à disposition et équipée d'ordinateurs portables, d'un accès Wi-Fi, d'un projecteur et d'un tableau blanc. En distanciel la session sera suivie sur Zoom ou autre outil de visioconférence sur demande (Teams, Webex, Google Meet...).
- Un support de cours en version numérique sera remis à chaque participant
Modalités d’évaluation
- Questions orales ou écrites (QCM)
- Exercices pratiques
- Auto-positionnement en amont et aval de la formation