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. 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 the following command to serve the project with the backend app:

   npm run serve ngrx-effects with-server
   

   This should open the app in a new browser tab, and you should see the following:

   

   Figure 6.9: ngrx-effects app running on http://localhost...