There are different kinds of components. Two types of components are of interest in the context of NgRx: smart components and dumb components.

Smart components are also called container components. They should be on the highest level of your application, and handle routes. For example, ProductsComponent should be a container component if it handles the route/products. It should also know about the store. 

The definition of a dumb component is that it has no knowledge of a store and relies solely on the @Input and @Output properties—it's all about presentation, which is why it is also called a presentational component. A presentational component in this context can therefore be a ProductListComponent or a ProductCreateComponent. A quick overview of a feature module could therefore look like this:

ProductsComponent // container component
ProductsListComponent // presentational component
ProductsCreateComponent // presentational component

Let's look at a small code example so you get the idea:

// products.component.ts  - container component
@Component({
  template: `
    <products-list [products]="products$ | async">
  `
})
export class ProductsComponent {
  products$: Observable<Product>;

  constructor(private store: Store<AppState>) {
    this.products$ = this.store.select('products'); 
  }
}

// products-list.component.ts  - dumb component
@Component({
  selector: 'products-list',
  template : `
  <div *ngFor="let product of products">
  {{ products.name }}
  </div>
  `
})

export class ProductsListComponent {
  @Input() products;
}

Our ProductsComponent is responsible for handling the route to /products. ProductsListComponent is a dumb component and just gets a list assigned to it that it is more than happy to render to the screen.