Using NgRx effects to fetch data from API calls

In this recipe, you'll learn how to use NgRx effects using the @ngrx/effects package. We have an app that already has @ngrx/store and @ngrx/store-devtools installed in the app. And we are able to add and remove items from the bucket. However, in this recipe we'll use a server to receive, store, add and remove items from a bucket. I.e. the data will live in the NgRx store as well as on the backend.

Getting ready

The app that we are going to work with resides in start/apps/chapter06/ngrx-effects inside the cloned repository:

1. Open the code repository in your Code Editor.
2. Open the terminal, navigate to the code repository directory and run npm run serve ngrx-effects with-server to serve the project with the backend app.

This should open the app in a new browser tab. If you add a couple of items, you should see the following:

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

Now that we have the app running...