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 / 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 26/12/2022