Formation NgRx
Inspiré par Redux de l'écosystème React, NgRx est une bibliothèque de gestion de state pour Angular (state management). NgRx vous permet de stocker l'état d'un composant globalement, de sorte à pouvoir le remettre dans un état précédent : suite à un changement de navigation, pour du déboggage temporel, pour mettre en place un cache etc... Dans cette formation pratique, nous développerons une application fil rouge après quelques rappels sur Angular et RxJS dont dépendent NgRx. Nous verrons les principaux concepts : les actions, les reducers, les sélecteurs. Puis nous utiliserons des bibliothèques complémentaires pour gérer les Side Effects, ou simplifier la récupération de données du serveur.
Objectifs pédagogiques / Compétences visées
- 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
Moyens pédagogiques et techniques
- Formateur validé par nos équipes techniques et pédagogiques
- Salle de formation informatisée
- Support de cours numérique
Suivi et appréciation des résultats
- Questions orales ou écrites (QCM)
- Exercices pratiques
- Formulaires d'évaluation
Formations associées
Dernière modification le 08/11/2020