Learning Redux

Presentational versus container components

In the React bindings for Redux, there is a principle of separating presentational from container components (sometimes also called dumb and smart components). It is best practice to put them in different folders.

Presentational components are:

• Concerned with how things look
• Usually written as functional components, because they are very simple; they only render a certain part of the user interface
• Not connected to the Redux store
• Contain both presentational and container components

Container components are:

• Concerned with how things work
• Usually written as class components or using React bindings, such as the React-Redux bindings, because they are usually stateful
• Data sources—they provide data ...