Logo NgRx

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

Accessibilité aux personnes handicapées

Nous nous engageons à rendre notre formation NgRx accessible aux personnes en situation de handicap. Merci de nous contacter afin que nous puissions réaliser les adaptations nécessaires en amont de la formation.

Formations associées

Dernière modification le 26/12/2022