NgRx (with NgRx Data) - The Complete Guide (Angular 22)

Learn to configure an NgRx feature module with schematics, set up authentication state with actions and reducers, and distinguish eager versus lazy loading to manage login data in the store.

Explore the store service api to interact with the in-memory store, implement the login screen, authenticate via backend, and dispatch actions to save the user profile into the global store.

Define and dispatch a login action using a type-safe action creator with props, sending a payload of user data to the store and observing how actions drive store updates.

Define a logout action in the authentication module and group related actions with a TypeScript action types file to simplify reducers and access all authentication actions.

Define a reducer to handle login actions, updating the authentication state with the user profile, using createReducer and on for the authentication feature.

Learn how dispatching a login action updates the in-memory store through the authentication reducer to save the user profile, illustrating actions, reducers, and shared state in NgRx.

Discover how to query the NgRx store to manage the authentication state, using the store observable and async pipe to show or hide login and logout buttons.

Master anchor selectors and memoized mapping with create selector to derive is logged in and is logged out from the store, using select to optimize data changes.

Learn how to use feature selectors to type-safely access authentication state from the store, using create feature selector to improve autocompletion, and prepare for logout and authentication guard concepts.

Dispatch a logout action to remove the user profile from the store, returning a new authentication state and guarding the courses screen with authentication.

Implement a canActivate authentication guard to protect the courses route, redirecting unauthenticated users to the login page using the store's isLoggedIn selector and rxjs tap.

Explore NgRx effects and side effects in the store architecture. Learn how to synchronize in-memory store data with a backend and persist authentication state to local storage.

Implement a first side effect in an NgRx app by saving the user profile to local storage on login, using an authentication effects service and actions stream.

Implement a login effect with the createEffect utility, using RxJS operators like ofType and tap, ensuring type-safe, error-handling side effects that persist user profiles to local storage without manual subscriptions.

Implement the logout effect in NgRx to clear user profile from local storage and redirect to login page, while reading the profile on startup to preserve login after refresh.

Learn to set up the NgRx router store and time-traveling debugger to replay actions, reflect router navigation, and debug login and logout flows.

Learn how NgRx runtime checks enforce strict state immutability, action immutability, and serializability to protect reducers and actions, support time traveling debugger, and introduce meta reducers.

Discover how meta reducers run before normal reducers and learn to implement a logging meta reducer step by step, covering their order, development environment, and preparation for entity data handling.

Learn to manage entity data for courses and lessons with NgRx entity library. Design actions to load data once at startup and serve from the store to reduce backend requests.

Define actions in NgRx by creating a course actions file, loading all courses via a router resolver, then using an effect to fetch from the backend and store the results.

Implement a courses resolver to prefetch backend data via the router, dispatch the load all courses action, and manage loading state with store and finalize in an observable.

Create a courses effects class that handles the load all courses action by fetching data from the backend (using concatMap) and dispatching the all courses loaded action to the store.

Understand how NgRx entity format stores courses as an entities dictionary with a separate IDs array to preserve order, and how the entity module simplifies reducers.

Learn how to manage courses with the NgRx entity adapter, using an entity format, an adapter with addAll, and initial state to implement reducers and selectors for a lazy-loaded feature.

Refactor the home component to consume the course list from the store with NgRx entity selectors, including select all, beginner and advanced filters, and promo total.

Configure an entity adapter in NgRx data to sort courses by their sequential number with a sort comparator, and learn when to use selectId versus the default ID field.

Implement a data fetching solution that loads courses only when needed by adding an all courses loaded flag, guarding the resolver with a selector, and preventing repeated backend calls.

Dispatch a course updated action from the edit dialog to update the store immediately, reflecting changes in the interface, while the entity update type handles the payload.

Perform optimistic data editing by saving course updates in the background with an NgRx effect, using concatMap and a backend put request while the user interface updates immediately.

Explore how NgRx data enables entity data management for courses and lessons, replacing manual actions, reducers, and effects with a streamlined in-memory store and optimistic updates.

Configure NgRx data for a lazy loaded courses module by defining course entity metadata and registering it with the entity definition service, then build a course entity service.

Learn how NgRx Data loads course data from the backend via a resolver, stores it in the store, and serves it during routing transitions using get all and observables.

Learn to optimize data loading in NgRx Data by using the loaded flag in the course entity cache and fetch data once with getAll before routing.

Employs the course entity service to query store data instead of backend calls, deriving beginner, advanced, and promotion data from entities$ and simplifying loading indicators with NgRx data.

Demonstrates implementing course CRUD with NgRx Data, including optimistic updates. Replaces manual http calls with the course entity service for instant UI updates and automatic backend synchronization.

Explore how NgRx data performs a pessimistic add to create a new course via a backend post, using a creation-mode dialog and updating the store after a successful save.

Implement optimistic delete for the course entity with the NgRx Data entity service, triggering an HTTP delete and updating the store immediately, following the default optimistic strategy.

Set up the lesson entity in an NgRx data-enabled angular app, defining its one-to-many relationship to course, adding a lesson entity service, and using the store for CRUD operations.

Refactor the course component to fetch data from the store using NgRx Data, via the course and lesson entity services, derive the course observable, and implement pagination for lessons.

Learn to implement paginated loading of course lessons with NgRx Data, combining lessons and course observables, filtering by course id, and adding a load more mechanism with a loading indicator.

Learn how to switch an Angular app to OnPush change detection, using input properties, immutable store data, observables, and the async pipe to update the user interface efficiently.

Understand why a centralized store supports complex user interfaces with multiple views and editable data across components. See how in-memory storage reduces server calls and improves performance.