Creating an effect to fetch third-party API data

In this recipe, you'll learn how to use NgRx effects using the @ngrx/effects package. You'll create and register an effect, and that effect will be listening for an event. Then, we'll react to that action to fetch third-party API data, and in response, we'll either dispatch a success or a failure action. This is gonna be fun.

Getting ready

The project for this recipe resides in chapter06/start_here/using-ngrx-effect:

1. Open the project in 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, and you should see the app, as follows:

Figure 6.11 – Using ngrx-effects app running on http://localhost:4200

Now that we have the app running locally, let's see the steps of the recipe in the next section.

How to do it…

We have an app with...