Angular 6 et NgRx 6 par la pratique
Gérez l'état de vos applications Angular avec NgRx
Qu'est-ce qui permet la force et la longévité d'Angular ? C'est, notamment, de s'inspirer de ce qui fonctionne bien ailleurs pour l'ajouter à son propre éco-système. Ainsi, la librairie Redux, très populaire chez les développeuses et développeurs React a servi d'inspiration (pour ne pas dire plus) à NgRx. Pour le dire vite, prenez le meilleur de Redux et ajoutez une bonne dose de RxJS : vous voilà aux commandes d'un système de gestion d'état cumulant les avantages de Redux (un store unique contenant votre état, des actions pour indiquer le nouvel état que vous souhaitez créer, des reducers qui créeront ce nouvel état) et les avantages de RxJS en vous permettant de vous abonner aux flux qui vous permettront d'interagir avec votre store.
Et si Redux et NgRx ne vous intéressent à priori pas plus que ça, j'espère vous convaincre que ces technologies vous aideront à aller plus loin :
- en vous permettant de bien comprendre et mettre en oeuvre l'immutabilité
- en vous incitant à utiliser des bonnes pratiques qui vous permettront de séparer les responsabilités de vos divers components en allant plus loin dans l'utilisation des fameux @Input() et @Output() decorators (et autres EventEmitter) afin de bien faire la distinction entre smart components (chargés de communiquer avec le store) et presentation components (dédiés au seul rendu)
- en vous faisant économiser des heures de debug grâce aux outils qui vous permettront de facilement identifier les actions qui ont provoqué un changement d'état indésirable et même de rejouer ces actions à volonté, ce qu'on a souvent appelé dans le monde de Redux une machine à remonter le temps, afin de pouvoir rejouer les actions de vos utilisateurs
- en mettant en lumière certaines spécificités de TypeScript (telles que enum, custom types etc ...)
- en rendant votre CV plus attractif, car Redux et NgRx sont un plus indéniable sur un CV
Pré-requis
Le pré-requis à "Angular et NgRx par la pratique" est Angular 6, Angular Material et RxJS 6 par la pratique, formation qui vous permettra de vous familiariser avec Angular et RxJS.
Votre formateur
Développeur web depuis 2003 dans des entreprises clientes publiques (SNCF, URSSAF, EDF...) et privées (Iron Mountain, Jouve, CDiscount...), dirigeant de la société rennaise Code Concept spécialisée en formation JavaScript Front, Back et mobiles hybrides, Samir Medjdoub a eu comme comme fil conducteur la conscience qu’il est bien plus facile de rester sur la vague que de tenter de remonter après s’être laissé submerger. Fidèle à cette stratégie, il a ainsi pris la vague Angular 2 dès les versions bêta en 2015, celle de Node.js il y a sept années de cela et a eu la chance d'évoluer dans des sociétés qui avaient été parmi les premières en France à adopter MongoDB, conjointement aux bases de données relationnelles. Il a toujours cru que comparaison était raison et a porté une égale attention à React et Redux dès 2015, puis Vue.js en 2016. Meteor et désormais Svelte.js sont les outsiders qui retiennent régulièrement son attention.
Les développeuses et développeurs JavaScript (Front, Back ou Fullstack !) ont de très beaux jours devant eux : les formations de la société Code Concept vous aideront à investir efficacement dans les frameworks, plateformes et librairies JavaScript qui vous ouvriront de belles opportunités en 2024 !
Programme de la formation
-
CommencerGénération d'une nouvelle application à l'aide d'Angular CLI (7:37)
-
CommencerSimple compteur sans NgRx (6:13)
-
CommencerInstallation de @ngrx/store (5:27)
-
CommencerDispatcher une action (8:31)
-
CommencerCréation de notre premier reducer (15:19)
-
CommencerGestion d'un deuxième type d'action dans notre reducer (13:36)
-
CommencerS'abonner à notre store pour recevoir les nouveaux états (9:30)
-
CommencerInstallation des dev tools de Redux et NgRx (6:46)
-
CommencerCréer un état plus complexe (9:01)
-
CommencerTyper fortement nos actions (9:04)
-
CommencerCréer un enum pour éviter les bugs liés aux fautes de frappe (8:47)
-
CommencerCréer un type (4:19)
-
CommencerPrésentation de @ngrx/effects (9:24)
-
CommencerCréation de la nouvelle application et configuration des dev-tools (7:08)
-
CommencerCréation et exportation de notre repo-list component (5:41)
-
CommencerCréation d'un service Angular pour requêter l'API Github (7:03)
-
CommencerMise en oeuvre du service Angular (3:55)
-
CommencerAjout de NgRx (actions, reducer ...) (12:33)
-
CommencerImplementer notre premier Effect (17:26)
-
CommencerCréation de selectors pour coupler plus faiblement store et components (9:27)
-
CommencerRésumé (3:56)