Pouquoi Ngrx
Apprendre NgRx est essentiel pour tout développeur Angular souhaitant créer des applications modernes et performantes.
Dans un monde où les applications web deviennent de plus en plus complexes, la gestion efficace de l'état est cruciale.
NgRx offre une architecture robuste basée sur le pattern Redux, qui permet de centraliser et de gérer l'état de votre application de manière prévisible et débogable.
En maîtrisant NgRx, vous pourrez non seulement simplifier la gestion des données et des interactions avec les API, mais aussi améliorer la réactivité et la performance de vos applications.
De plus, avec l'intégration des signaux et des WebSockets, vous serez en mesure de créer des expériences utilisateur en temps réel, essentielles dans de nombreux scénarios modernes.
Apprendre NgRx vous permettra d'élever vos compétences en développement web à un niveau supérieur, vous rendant indispensable sur le marché du travail.
Ce que vous apprendrez
Dans cette formation avancée sur NgRx avec Angular 18, vous allez maîtriser les outils indispensables pour la gestion de l'état global d'une application. Voici ce que vous apprendrez :
- NgRx Store : Vous découvrirez comment centraliser l'état de votre application avec NgRx Store, tout en comprenant le flux unidirectionnel des données grâce aux actions, reducers, et selectors.
- NgRx Effects : Vous apprendrez à gérer les effets secondaires (side effects) tels que les appels API, en utilisant NgRx Effects pour séparer la logique asynchrone du reste de votre code.
- NgRx Router Store : Vous verrez comment synchroniser l'état de votre application avec le routeur d'Angular, pour que la navigation fasse partie de la gestion de l'état.
- NgRx DevTools : Vous utiliserez des outils de développement avancés pour visualiser l'état de votre application en temps réel, tout en apprenant à déboguer avec des techniques de time-travel debugging.
- NgRx Signal : Vous découvrirez l'intégration des signaux (Signals) dans NgRx, pour gérer les changements d'état de manière réactive et optimisée, tout en améliorant la performance de votre application Angular.
- Angular et WebSockets : Vous apprendrez à implémenter la communication en temps réel via des WebSockets dans une application Angular avec NgRx, permettant des mises à jour en direct et une synchronisation instantanée des données
En fin de formation, vous serez capable d'implémenter NgRx dans vos projets professionnels, de gérer l'état global avec efficacité, et de créer des applications Angular 18 robustes et performantes.
Programme
- 4 - Understanding NGRX (4:22)
- 5 - Architecture respected to build a huge project (4:02)
- 6 - Create a State and Model (1:53)
- 7 - Create a Actions and Types (2:52)
- 8 - Create a Reducer (3:55)
- 9 - Create a Selector (3:22)
- 10 - Link a Store with a Angular Project (2:38)
- 11 - Use Selector in a Component (4:25)
- 12 - Use Dispatch in a Component (2:24)
- 13 - Create Contact Module with a States (4:29)
- 14 - Actions of Contact Module (3:51)
- 15 - Reducer of Contacts (8:47)
- 16 - Generate a Component of Contact (3:48)
- 17 - Contact Form Component (4:37)
- 18 - List and Grid Components (3:53)
- 19 - Actions Button Component (Toggle, edit, delete) (5:06)
- 20 - Connect to a Store at list (5:14)
- 21 - Display a Form (2:20)
- 22 - Create a State or Just a Variable (4:39)
- 23 - Add and Cancel Buttons (3:53)
- 24 - Persist a data into a Store (4:19)
- 25 - Delete a contact from a Store (3:22)
- 26 - Toggle a contact from a Store (1:34)
- 27 - Edit a Contact from a Store (8:23)
- 28 - Update a Contact (8:41)
- 29 - Install Ngrx Devtools (6:25)
- 30 - Create a Shared Module (Toast) (5:43)
- 31 - Create a States, Model, Actions and Reducer for a Toast (4:57)
- 32 - Create all Contact Selectors (2:10)
- 33 - Generate a Toast Component (3:17)
- 34 - Make the Toast component dynamic (3:40)
- 35 - Frequent problem (3:41)
- 36 - Apply toast to editing, toggle and also adding (2:10)
- 37 - understand the concept of effect (2:55)
- 38 - Create all Effects (5:30)
- 39 - know how to retrieve data passed via props (4:38)
- 40 - Optimize the code in Contact component (5:20)
- 41 - Create Contact Service (3:13)
- 42 - Execute a contact service save method in effect (4:06)
- 43 - Apply all service methods to effect (3:14)
- 44 - Understand the relationship between effect and service (3:10)
- 45 - Process the return if successful from the service (7:00)
- 46 - Process the return if rejected from the service (4:36)
- 47 - Use Action Failure in Effect (5:49)
- 48 - Update Success and Failure (4:18)
- 49 - Apply Success and Failure to a effect (3:06)
- 50 - Load and Display List of Contacts (4:00)
- 51 - Code Source
- 52 - Model, State, Actions of Auth (4:05)
- 53 - Reducer, Selectors AppStore, of Auth (4:26)
- 54 - Create Auth Effect (7:01)
- 55 - Refactoring Login (4:33)
- 56 - Installation and Config Ngrx Router Store (2:48)
- 57 - Router Effect and Go Action (5:48)
- 58 - login Success Redirect Effect (4:01)
- 59 - Router Selectors (4:33)
- 60 - Code Source
- 61 - Refactoring List and Form of Category (5:26)
- 62 - Add A Modal from DaisyUI (4:54)
- 63 - Install NgRx Signal Store (7:13)
- 64 - Create a First Method Add in the Store (4:52)
- 65 - Category Form Validation (2:05)
- 66 - Create A Load Method in the Store (6:19)
- 67 - Execute a Method From a Store (3:15)
- 68 - Persist From a Store Signal (6:58)
- 69 - Edit a Category State (4:59)
- 70 - Update a Category from a Store (5:47)
- 71 - Delete a Category from a Store (3:57)
- 72 - NgRx Toolkit for Signals Store (3:49)
- 73 - Handle Error in Signals Store (4:59)
- 74 - Handle a Specific Error (1:22)
- 75 - Lifecycle withHooks for Signal Store (2:34)
- 76 - Code Source
Mohamed IDBRAHIM
Je suis Mohamed IDBRAHIM, passionné d'Angular et spécialiste en gestion de l'état global avec NgRx, fort d'une expérience solide de 15 ans en développement informatique. Mon expertise s'étend à la formation pratique, où j'ai eu le privilège de guider des centaines de développeurs à maîtriser les outils les plus avancés du développement front-end. Mon approche pédagogique, ancrée dans la réalité marocaine et adaptée à la richesse de la langue Darija, favorise une compréhension intuitive et profonde des principes d'NgRx, faisant le pont entre la théorie et les scénarios d'utilisation réels.
L'enseignement n'est pas seulement mon métier, c'est ma vocation. M'impliquer dans le succès de mes élèves est pour moi une source de motivation quotidienne. En plus de partager mon savoir sur des plateformes comme Teachable et Youtube, je continue d'innover dans ma transmission des connaissances, en veillant toujours à dynamiser mes cours avec les dernières évolutions d'Angular et NgRx. Rejoignez-moi dans cette aventure de formation avancée et transformez les défis de la gestion d'état en Angular en compétences solides et en succès palpables.
