Adding a component – introducing selectors

That's it, thats all you need to create an effect. We're not done here though, we need a component to display our data, as well as a spinner, while we are waiting for the AJAX request to finish.

Ok, first things first: what do we know of components that should be using NgRx? The obvious answer is that they should be injecting the store so we can listen to a slice of state from the store. The way we listen to a slice of state is by calling the stores select() function. This will return an Observable. We know we can easily show Observables in the template through the use of the async pipe. So let's start sketching our component:

// product/product.component.tsimport { Component, OnInit } from "@angular/core" ...

Get Architecting Angular Applications with Redux, RxJS, and NgRx now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.