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

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 (
 

 

 
 
 );
 }
}
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: