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 as Presentational or Container ?
• What are the difference between these two ?
• What are the benefit of categorizing components this way ?

Answer 1

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 2

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]}
/>