Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Redux Presentational Components Vs Container Component

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 ?
like image 634
cjohn Avatar asked Jan 13 '17 13:01

cjohn


People also ask

What is the difference between presentational and container components?

Finally at the conclusion we can conclude in simple terms that the presentational components are concerned with the look, container components are concerned with making things work.

What is the difference between component and container in Redux?

A Component is a class or function that describes part of a React UI. Container is an informal term for a React component that is connect -ed to a redux store.

Is container a component of Redux?

Basically, container components are called smart components because each container component is connected to Redux and consumes the global data coming from the store.


2 Answers

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

like image 80
Niroshan Ranapathi Avatar answered Sep 20 '22 01:09

Niroshan Ranapathi


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]}
/>
like image 22
Sajeetharan Avatar answered Sep 22 '22 01:09

Sajeetharan