Using selectors to fetch data from stores in multiple components

In the previous recipe, we created an NgRx effect to fetch third-party API data as users, and we saved it in the Redux store. That's what we have as a starting point in this recipe. We have an effect that fetches the users from api.randomuser.me and stores it in the state, and we don't currently show anything on the user interface (UI). In this recipe, you'll create some NgRx selectors to show users on the Home page as well as on the User Detail page with similar users.

Getting ready

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

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. As soon as the page is opened, you should see the app, as follows:

Figure 6.16 – Using ngrx-selectors...