Learn NgRx page
Learn how to manage state in an Angular application using NgRx.
Before you begin
Click here to join the
Bitovi Community Discord
Join the Bitovi Community Discord to get help on Bitovi Academy courses or other Angular, React, CanJS and JavaScript problems.
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 contact@bitovi.com.
Overview
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.
Outline
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.
We’ll next create Effects (Create an API Effect) so we can connect our store an authentication Service, and learn how to write unit tests for NgRx Effects (Testing API Effects).
Next, we’ll create additional Effects (Creating Redirect Effects) to redirect on login successes and failures, and cover them with unit tests (Testing Redirect Effects).
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).
Next, we’ll create Selectors (Creating Selectors) so we can access the data stored within our NgRx State, and learn how to write unit tests for NgRx Selectors (Testing Selectors).
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).
Requirements
In order to complete this guide, you need to have git and Node.js version 14 or later installed.
We’ll be using Angular 14.
We highly recommend you take our Angular and RxJS courses before attempting this one.