Using NgRx selectors to select and render state in components

In the previous recipes we created some actions, a reducer and integrated devtools to observe the state changes. However, our bucket application still renders the data using some variables in the 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 npm run serve ngrx-selectors to serve the project

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

Figure 6.16 – Using ngrx-selectors 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...