Component architecture

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...