With the Model-View-Presenter design pattern it is easy to use any application state management library or pattern whether its a redux-like state container like the NgRx Store or simply plain old services as in the “Tour of Heroes” Angular tutorial.

Container components sit at the boundary of the presentational layer and integrate our UI with the application state. They serve two main purposes:

• Container components supply a data flow for presentation.
• Container components translate component-specific events to application state commands or actions to put it in Redux/NgRx Store terms.

Container components can also integrate UI to other non-presentational layers like I/O or messaging.

In this article we will go through the process of extracting a container component from a mixed component.

#angular #rxjs #software-architecture