Using NgRx selectors to select and render state in components

In the previous recipes, we created some actions, a single reducer, and we integrated devtools to observe the state changes. However, our bucket application still renders the data using some variables in BucketService. In this recipe, we’re going all in with NgRx. We’re going to render the bucket items from the state as we already are saving them in the NgRx store.

Getting ready

The app that we are going to work with resides in start/apps/chapter06/ngrx-selectors 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:

   npm run serve ngrx-selectors
   

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

   

   Figure 6.8: Using the ngrx-selectors app running on http://localhost:4200

Now that we have...