Redux Presentational Components Vs Container Component

Question

I\'m beginner of react development with redux. I\'m wondering what are the Presentational Components and Container Components.

• How to categorized components a

Answer 1

This is how I understand it:

Presentation Components

concern with how things look

Container Components

components with logic involved

However, upon further research, I realised that such separation is sometimes unnecessary as mentioned by Dan Abramov here: https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0

You can understand presentation component as something you find in react UI component library. They makes UI component looks pretty. Then, one only have to compose the presentation components in container component as needed.

Having said that, if you're using a component library, then most of the component you coded will be container component. Of course you can make your own react UI component library.

As nothing is hard rules in programming, react UI component library may have some logic tightly coupled with the component (ie how it behaves, such as a drawer component) and still treated to be presentation component.

Answer 2

You’ll find your components much easier to reuse and reason about if you divide them into two categories. I call them Container and Presentational components.

I assume you have knowledge about redux architecture

Container Components

• Aware of redux
• Subscribe redux state
• Dispatch to redux actions
• Generated by react-redux
• Focus on how things work

Presentational Componets

• Unaware of redux
• Read data from props
• Invoke callbacks on props
• Written by developer
• Focus on how thing look

Benefits of categorizing components

• Reusability
• Separation of concerns

For more details read this article

Answer 3

Here is the summarized version of the differences inorder to understand easily, even though some of them are related to the above answer above,

Container Components

• Are concerned with how things work
• Responsible for providing data to presentational components via properties
• Also responsible for handling state changes triggered inside a presentation component via callback properties. These state changes are often done via dispatching an action.

Example :

class TodoApp extends Component {
 componentDidMount() {
 this.props.actions.getTodos();
 }
 render() {
 const { todos, actions } = this.props;
 return (
 <div>
 <Header addTodo={actions.addTodo} />
 <MainSection todos={todos} actions={actions} />
 </div>
 );
 }
}
function mapState(state) {
 return {
 todos: state.todos
 };
}
function mapDispatch(dispatch) {
 return {
 actions: bindActionCreators(TodoActions, dispatch)
 };
}
export default connect(mapState, mapDispatch)(TodoApp);

Presentation Components

• Are concerned with how things look
• Use props for displaying everything
• Do not manage state at all
• Don’t emit actions, but may take callbacks that do via props

Example:

<MyComponent
 title=“No state, just props.”
 barLabels={["MD", "VA", "DE", "DC"]}
 barValues={[13.626332, 47.989636, 9.596008, 28.788024]}
/>