Learn how to manage state in an Angular application using NgRx.
Before You Begin
Please ask questions related to Angular in the Angular chat room.
If you find bugs in this training or have suggestions, create an issue or email
In this guide, we'll be building an application with a login page and a user dashboard.
Our application will be making use of a Global State (
@ngrx/store) to manage user login.
This guide begins (Why NgRx) with a discussion of NgRx's strengths and an overview of its main concepts. We will also checkout the application starting point repository (Getting Started) and install the necessary NgRx dependencies (Installing NgRx).
Then we will learn how to create Actions (Creating Actions) for our Login Store to handle login success and failures. Next, we'll learn how to dispatch Actions (Dispatching Actions) from within Components.
With our implementation using Actions complete, we'll learn how to unit test NgRx Actions (Testing Actions) and update our Component spec files.
With our Actions and Effects in place, we'll create a Reducer (Create a Reducer) so our Actions can lead to updates to our Login State, and learn how to write unit tests for NgRx Reducers (Testing Reducers).
With the logic for our store in place, we'll then learn how to use NgRx Selectors within our Components to display data (Using Selectors), and how to test these selectors within Component spec files (Testing Selector Use).
In order to complete this guide, you need to have git and NodeJS version 14 or later installed.
We'll be using Angular 14.