Redux and Component Architecture

In the previous example, our counter component is a smart component. It knows about redux, the structure of the state, and the actions it needs to call. While in theory you can drop this component into any area of your application and have it just work. But, it will be tightly bound to that specific slice of state, and those specific actions. For example, what if we wanted to have multiple counters tracking different things on the page? For example, counting the number of red clicks vs blue clicks.

To help make components more generic and reusable, it is worth considering smart component, or container components - and dumb components.

	Container Components	Presentational Components
Location	Top level, route handlers	Middle and leaf components
Aware of Redux	Yes	No
To read data	Subscribe to Redux state	Read data from props
To change data	Dispatch Redux actions	Invoke callbacks from props

Redux Docs