Calling an API

We have already created user authentication in the previous section by calling the authentication service directly in our component. We have also stored the generated JWT in our local storage using the setItem function, which is also happening in our login component.

What we want to achieve is to reduce the responsibility of our components, and as we remember, we are using NgRx state management to call the APIs, and the only responsibility of our components is to dispatch the action, and NgRx will do the rest.

In this section, we will improve our API calls by using the building blocks of the NgRx state management.

Creating the actions

The first step we need is to create the actions for our authentication feature. We will create a file named auth.actions.ts in the auth/state folder, and we will have the following code:

import { createAction, props } from '@ngrx/store';
export enum AuthActions {
 LOGIN = '[AUTH] Login',
 SET_TOKEN = ...