Logo NgRx

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 21/04/2020