Redux Presentational Components vs. Container Component

Question

I am new to developing a reaction with redux. I wonder what presentation components and container components are.

• How to classify components as presentation or container?
• What is the difference between the two?
• What are the benefits of categorizing components in this way?

Answer 1

You will find it much easier to reuse your components and reason about whether you will divide them into two categories. I call them the Container and Presentational components.

I assume you have knowledge of redux architecture

Container components

• Conscious contraction
• -
• , .

• , .

.

Answer 2

, , ,

• ,
• , . .

:

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

• ,
• ,

:

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