Creating your first NgRx store with actions and reducer

In this recipe, you'll work your way through understanding NgRx's basics by setting up your first NgRx store. You'll also create some actions along with a reducer, and to see the changes in the reducer, we'll be putting in appropriate console logs.

Getting ready

The project that we are going to work with resides in chapter06/start_here/ngrx-actions-reducer, inside the cloned repositor:

1. Open the project in Visual Studio Code (VS Code).
2. Open the terminal and run npm install to install the dependencies of the project.
3. Once done, run ng serve -o.

This should open the app in a new browser tab. Tap the Login as Admin button and you should see the following screen:

Figure 6.1 – ngrx-actions-reducers app running on http://localhost:4200

Now that we have the app running, we'll move on to the steps for the recipe.

How to do it…

We have...