Ngrx (With Ngrx Data) - The Complete Guide (Angular 15) - Printable Version +- Softwarez.Info - Software's World! (https://softwarez.info) +-- Forum: Library Zone (https://softwarez.info/Forum-Library-Zone) +--- Forum: Video Tutorials (https://softwarez.info/Forum-Video-Tutorials) +--- Thread: Ngrx (With Ngrx Data) - The Complete Guide (Angular 15) (/Thread-Ngrx-With-Ngrx-Data-The-Complete-Guide-Angular-15) |
Ngrx (With Ngrx Data) - The Complete Guide (Angular 15) - AD-TEAM - 05-23-2024 Ngrx (With Ngrx Data) - The Complete Guide (Angular 15) Last updated 2/2023 MP4 | Video: h264, 1280x720 | Audio: AAC, 44.1 KHz Language: English | Duration: 6h 16m Learn the modern NgRx Ecosystem, including NgRx Data, Store, Effects, Router Store, NgRx Entity, and DevTools [b]What you'll learn[/b] Code in Github repository with downloadable ZIP files per section Become familiar with the centralized store pattern, and how to use it in Angular Know when to use a centralized store solution and why Learn how to use NgRx Data to handle entity data with minimal code Learn In-depth NgRx Store, understand in detail all core store patterns, including Reducers and Actions Learn in detail NgRx Effects, learn when to use a side-effect Learn in detail NgRx Entity, when to use and why, learn what are the benefits Transform step-by-step an existing Angular plain application, and turn it into a store based application Learn to implement common functionality in NgRx, such as Authentication or Entity Pagination Learn NgRx in-depth in a fun and practical way, by implementing real use cases [b]Requirements[/b] Just a little bit of Angular and Typescript [b]Description[/b] This course is a complete guide to the new NgRx Ecosystem, including NgRx Data, Store, Effects, Router Store, NgRx Entity, and DevTools, and comes with a running Github repoThis Course in a NutshellState management is the number one topic to know when it comes to frontend architecture design choices. Why choose to do state management in a single page application, when to do it and why, what are the benefits, and what are tradeoffs?These are all critical questions that we will address in this course, as we give you an extended guided tour of the NgRx Ecosystem.The most popular state management library in the Angular space is NgRx, and for good reasons. The latest release of NgRx is probably one of the most important releases in the whole Angular ecosystem recently. Although backward compatible, it contains so much new functionality that it's almost a brand new state management library.Under the hood, the core concepts of Actions, Reducers, Effects, Entities, and Selectors remain the same, but we have now a brand new API for managing these concepts in a much less verbose way. Also, we have the inclusion of NgRx Data, which is a new and very powerful way of managing Entity Data.Actually, NgRx Data is a powerful abstraction layer on top of NgRx, that allows us to add state management to large parts of our application without having to write much code at all!Course OverviewIn this course, we are going to take a small existing application that is built without any state management. We are going to understand what are the consequences of not doing state management by identifying some problems that the application has in its initial form.Then we are going to start refactoring the application, and we are going to add state management to the application multiple screens step-by-step. We are going to start with the Authentication features of the application, and then we are going to move on to the entity data management part.We are going to explain at length all the key concepts of NgRx: Actions, Reducers, Effects, and Selectors, and we are going to explain in detail the Store architecture itself and understand its benefits.Throughout the course we are going to introduce step-by-step and explain in detail the NgRx Store module, NgRx Effects, we are going to cover in detail NgRx Entity and the Entity format, we are going to install and do a guided tour of the NgRx Dev Tools, the NgRx Router Store, and the time-travelling debugger.We are also going to learn how to make the most out of NgRx Data, and learn how to customize it in order to manage entity data with minimal application code. We will cover NgRx while keeping in mind best practices like good Action hygiene.Table of ContentsThis course covers the following topics:Introduction to State ManagementThe Store Architecture In DetailNgRx Key ConceptsActions and Action CreatorsReducersNgRx EffectsSelectorsAdding Authentication to an NgRx ApplicationNgRx Entity and the Entity FormatNgRx DevToolsNgRx Time Travelling DebuggerNgRx Runtime checks and Store ImmutabilityNgRx Router StoreNgRx Data and Entity State ManagementNgRx Best PracticesWhat Will You Learn In this Course?At the end of this course, you will feel comfortable with the notions of state management and the centralized store solution in general.You will feel comfortable designing new Applications using NgRx, using a simple methodology and you will know in-depth the complete Ngrx library ecosystem: including the Ngrx Store, Effects, Entity, and NgRx Data libraries.You will know how to quickly scaffold parts of the solution using Ngrx Schematics, and how to set up the Ngrx DevTools from scratch, including the router integration. Overview Section 1: Introduction Lecture 1 NgRx (with NgRx Data) - Helicopter View Lecture 2 IMPORTANT - Recommended Software Versions Lecture 3 NgRx The Complete Guide - Development Environment Setup Lecture 4 The Typescript Jumpstart Ebook Lecture 5 What is NgRx, Why State Management and what are the benefits? Lecture 6 Installing NgRx and the NgRx DevTools Section 2: NgRx Key Concepts - Actions and Reducers Lecture 7 Configuring an NgRx Feature Module using NgRx Schematics Lecture 8 The Store Service API - Implementing the Login Screen Lecture 9 Defining NgRx Actions using Action Creators Lecture 10 Grouping Actions Together with Action Types Lecture 11 NgRx Reducers - Step-by-Step Implementation Lecture 12 Key Concepts Summary - NgRx Actions and Reducers In Action Section 3: NgRx Key Concepts - Selectors and Effects Lecture 13 How to Query the Store Data - An Example Lecture 14 NgRx Selectors - An In-Depth Explanation Lecture 15 NgRx Feature Selectors - a Simple Explanation Lecture 16 Implementing User Logout (Practice Lesson ) Lecture 17 Implementing a Router Authentication Guard (Practice Lesson) Lecture 18 Introduction to NgRx Effects - What is a Side Effect? Lecture 19 Understanding NgRx Effects - A Simple Example Lecture 20 NgRx Effects - Step-by-Step Implementation Lecture 21 Implementing the Logout Effect (Practice Lesson) Section 4: NgRx Development Tools In Depth Lecture 22 Setting up NgRx Router Store and the Time-Travelling Debugger Lecture 23 NgRx Runtime Checks - How do they work? Lecture 24 NgRx Metareducers - Step-by-Step Implementation Section 5: NgRx Entity In Depth Lecture 25 NgRx Entity - Section Kickoff Lecture 26 NgRx Feature Design - Defining Actions First Lecture 27 Loading NgRx Entity Data using a Router Resolver Lecture 28 NgRx Effects - Fetching Data From the Backend Lecture 29 Understanding the NgRx Entity Format Lecture 30 Implementing Reducers Using the NgRx Entity Adapter Lecture 31 NgRx Entity Selectors - Refactoring the Home Component Lecture 32 Entity Adapter Configuration - Understanding sortComparer and selectId Lecture 33 NgRx Data Fetching Solution - How to Load Data Only If Needed Lecture 34 Optimistically Editing Entity Data - The Edit Course Dialog Lecture 35 Optimistic Data Editing - Reducer Implementation and Demo Lecture 36 Optimistic Data Editing - Saving Data in the background with an Effect Section 6: NgRx Data In Depth Lecture 37 Why NgRx Data? New Section Introduction Lecture 38 Setting Up NgRx Data in a Lazy Loaded Module Lecture 39 How Does NgRx Data Work? Transparent Fetching Data In Action Lecture 40 NgRx Custom Data Service - Fetching Data From the Backend Lecture 41 Controlling Data Loading with the NgRx Data loaded flag Lecture 42 Querying Store Data with NgRx Data and the entities$ Observable Lecture 43 NgRx Data CRUD - Why use Optimistic Updates? Lecture 44 NgRx Data CRUD - Why Pessimistic Data Creation? Lecture 45 NgRx Data CRUD - Optimistic Delete Implementation Lecture 46 Setting Up a new Entity - The Lesson Entity Lecture 47 Implementing the Course Component Using NgRx Data Lecture 48 Lessons Pagination using NgRx Data Lecture 49 Switching an NgRx Application to OnPush Change Detection Section 7: Course Conclusion Lecture 50 Bonus Lecture Lecture 51 Angular NgRx Course Conclusion Angular Developers looking to learn in-depth the modern NgRx Ecosystem, including Ngrx Store, Effects, Router Store, Ngrx Entity, DevTools and Schematics! Free search engine download: Udemy NgRx with NgRx Data The Complete Guide Angular 17 |