what is presentational component or container component in redux [duplicate]
This question already has an answer here:
Redux Presentational Components Vs Container Component
2 answers
I am new to redux. I tried above question on searching google even on stackoverflow. But can't find suitable answer for me. I want to know
What is presentation and container component in redux?
and
what is smart and dump component in react?
with the suitable example, which will help me to understand above, Thanks.
reactjs redux
marked as duplicate by estus, tripleee, Michael Dodd, Makyen, eyllanesc Nov 22 '18 at 5:09
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
add a comment |
This question already has an answer here:
Redux Presentational Components Vs Container Component
2 answers
I am new to redux. I tried above question on searching google even on stackoverflow. But can't find suitable answer for me. I want to know
What is presentation and container component in redux?
and
what is smart and dump component in react?
with the suitable example, which will help me to understand above, Thanks.
reactjs redux
marked as duplicate by estus, tripleee, Michael Dodd, Makyen, eyllanesc Nov 22 '18 at 5:09
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
1
I tried above question on searching google even on stackoverflow - no wonder. There's no such thing as 'component in redux'. Redux doesn't deal with components. React does.
– estus
Nov 20 '18 at 7:16
Oh, sorry. I forgot to write react instead of redux.
– user10298495
Nov 20 '18 at 7:22
add a comment |
This question already has an answer here:
Redux Presentational Components Vs Container Component
2 answers
I am new to redux. I tried above question on searching google even on stackoverflow. But can't find suitable answer for me. I want to know
What is presentation and container component in redux?
and
what is smart and dump component in react?
with the suitable example, which will help me to understand above, Thanks.
reactjs redux
This question already has an answer here:
Redux Presentational Components Vs Container Component
2 answers
I am new to redux. I tried above question on searching google even on stackoverflow. But can't find suitable answer for me. I want to know
What is presentation and container component in redux?
and
what is smart and dump component in react?
with the suitable example, which will help me to understand above, Thanks.
This question already has an answer here:
Redux Presentational Components Vs Container Component
2 answers
reactjs redux
reactjs redux
edited Nov 20 '18 at 7:22
asked Nov 20 '18 at 7:12
user10298495
marked as duplicate by estus, tripleee, Michael Dodd, Makyen, eyllanesc Nov 22 '18 at 5:09
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
marked as duplicate by estus, tripleee, Michael Dodd, Makyen, eyllanesc Nov 22 '18 at 5:09
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
1
I tried above question on searching google even on stackoverflow - no wonder. There's no such thing as 'component in redux'. Redux doesn't deal with components. React does.
– estus
Nov 20 '18 at 7:16
Oh, sorry. I forgot to write react instead of redux.
– user10298495
Nov 20 '18 at 7:22
add a comment |
1
I tried above question on searching google even on stackoverflow - no wonder. There's no such thing as 'component in redux'. Redux doesn't deal with components. React does.
– estus
Nov 20 '18 at 7:16
Oh, sorry. I forgot to write react instead of redux.
– user10298495
Nov 20 '18 at 7:22
1
1
I tried above question on searching google even on stackoverflow - no wonder. There's no such thing as 'component in redux'. Redux doesn't deal with components. React does.
– estus
Nov 20 '18 at 7:16
I tried above question on searching google even on stackoverflow - no wonder. There's no such thing as 'component in redux'. Redux doesn't deal with components. React does.
– estus
Nov 20 '18 at 7:16
Oh, sorry. I forgot to write react instead of redux.
– user10298495
Nov 20 '18 at 7:22
Oh, sorry. I forgot to write react instead of redux.
– user10298495
Nov 20 '18 at 7:22
add a comment |
1 Answer
1
active
oldest
votes
What is presentation and container component in redux?
A presentation component is the one which is responsible for rendering something on the view.
A Container component is something that is connected to the redux store. Typically connect
from react redux is used to connect to the store
what is smart and dump component in redux?
A smart component is something that has some logic within it that is uses to render the view or process data like fetching data, maintain state, handling user interactions
A Dumb component is usually a ccomponent that just takes in the props and renders the view without actually handling any user interactions itself
For example
class App extends React.Component {
state = {
count: 0
}
render() {
return (
<div>
<User data={this.props.user} />
<div>{this.state.count}</div>
<button onClick={() => this.setState(prevState => ({count: prevState.count + 1}))}>Increment</button>
</div>
)
}
}
const User = ({ data }) => (
<div>
<div>{data.id}</div>
<div>{data.name}</div>
<div>{data.surname}</div>
</div>
)
const mapStateToProps = (state) => {
return {
user: state.user
}
}
const ContainerApp = connect(mapStateToProps)(App)
In the above example App
in itself is a presentation component along with a smart component as it handles user interaction of incrementing and showing count. However ContainerApp
is a component that is connected to redux store making use of presentational App component and is thus a container. User
component on the other hand is a dumb component along with a presentational component since it just takes some props and renders view based on it
please edit your answer. As i can't understand what is "A contains component".
– user10298495
Nov 20 '18 at 7:23
Sorry for the typo, I updated my answer
– Shubham Khatri
Nov 20 '18 at 7:25
Is above example for container or presentational component?
– user10298495
Nov 20 '18 at 7:26
Please check the description below the example. It explains what exactly each component is
– Shubham Khatri
Nov 20 '18 at 7:27
add a comment |
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
What is presentation and container component in redux?
A presentation component is the one which is responsible for rendering something on the view.
A Container component is something that is connected to the redux store. Typically connect
from react redux is used to connect to the store
what is smart and dump component in redux?
A smart component is something that has some logic within it that is uses to render the view or process data like fetching data, maintain state, handling user interactions
A Dumb component is usually a ccomponent that just takes in the props and renders the view without actually handling any user interactions itself
For example
class App extends React.Component {
state = {
count: 0
}
render() {
return (
<div>
<User data={this.props.user} />
<div>{this.state.count}</div>
<button onClick={() => this.setState(prevState => ({count: prevState.count + 1}))}>Increment</button>
</div>
)
}
}
const User = ({ data }) => (
<div>
<div>{data.id}</div>
<div>{data.name}</div>
<div>{data.surname}</div>
</div>
)
const mapStateToProps = (state) => {
return {
user: state.user
}
}
const ContainerApp = connect(mapStateToProps)(App)
In the above example App
in itself is a presentation component along with a smart component as it handles user interaction of incrementing and showing count. However ContainerApp
is a component that is connected to redux store making use of presentational App component and is thus a container. User
component on the other hand is a dumb component along with a presentational component since it just takes some props and renders view based on it
please edit your answer. As i can't understand what is "A contains component".
– user10298495
Nov 20 '18 at 7:23
Sorry for the typo, I updated my answer
– Shubham Khatri
Nov 20 '18 at 7:25
Is above example for container or presentational component?
– user10298495
Nov 20 '18 at 7:26
Please check the description below the example. It explains what exactly each component is
– Shubham Khatri
Nov 20 '18 at 7:27
add a comment |
What is presentation and container component in redux?
A presentation component is the one which is responsible for rendering something on the view.
A Container component is something that is connected to the redux store. Typically connect
from react redux is used to connect to the store
what is smart and dump component in redux?
A smart component is something that has some logic within it that is uses to render the view or process data like fetching data, maintain state, handling user interactions
A Dumb component is usually a ccomponent that just takes in the props and renders the view without actually handling any user interactions itself
For example
class App extends React.Component {
state = {
count: 0
}
render() {
return (
<div>
<User data={this.props.user} />
<div>{this.state.count}</div>
<button onClick={() => this.setState(prevState => ({count: prevState.count + 1}))}>Increment</button>
</div>
)
}
}
const User = ({ data }) => (
<div>
<div>{data.id}</div>
<div>{data.name}</div>
<div>{data.surname}</div>
</div>
)
const mapStateToProps = (state) => {
return {
user: state.user
}
}
const ContainerApp = connect(mapStateToProps)(App)
In the above example App
in itself is a presentation component along with a smart component as it handles user interaction of incrementing and showing count. However ContainerApp
is a component that is connected to redux store making use of presentational App component and is thus a container. User
component on the other hand is a dumb component along with a presentational component since it just takes some props and renders view based on it
please edit your answer. As i can't understand what is "A contains component".
– user10298495
Nov 20 '18 at 7:23
Sorry for the typo, I updated my answer
– Shubham Khatri
Nov 20 '18 at 7:25
Is above example for container or presentational component?
– user10298495
Nov 20 '18 at 7:26
Please check the description below the example. It explains what exactly each component is
– Shubham Khatri
Nov 20 '18 at 7:27
add a comment |
What is presentation and container component in redux?
A presentation component is the one which is responsible for rendering something on the view.
A Container component is something that is connected to the redux store. Typically connect
from react redux is used to connect to the store
what is smart and dump component in redux?
A smart component is something that has some logic within it that is uses to render the view or process data like fetching data, maintain state, handling user interactions
A Dumb component is usually a ccomponent that just takes in the props and renders the view without actually handling any user interactions itself
For example
class App extends React.Component {
state = {
count: 0
}
render() {
return (
<div>
<User data={this.props.user} />
<div>{this.state.count}</div>
<button onClick={() => this.setState(prevState => ({count: prevState.count + 1}))}>Increment</button>
</div>
)
}
}
const User = ({ data }) => (
<div>
<div>{data.id}</div>
<div>{data.name}</div>
<div>{data.surname}</div>
</div>
)
const mapStateToProps = (state) => {
return {
user: state.user
}
}
const ContainerApp = connect(mapStateToProps)(App)
In the above example App
in itself is a presentation component along with a smart component as it handles user interaction of incrementing and showing count. However ContainerApp
is a component that is connected to redux store making use of presentational App component and is thus a container. User
component on the other hand is a dumb component along with a presentational component since it just takes some props and renders view based on it
What is presentation and container component in redux?
A presentation component is the one which is responsible for rendering something on the view.
A Container component is something that is connected to the redux store. Typically connect
from react redux is used to connect to the store
what is smart and dump component in redux?
A smart component is something that has some logic within it that is uses to render the view or process data like fetching data, maintain state, handling user interactions
A Dumb component is usually a ccomponent that just takes in the props and renders the view without actually handling any user interactions itself
For example
class App extends React.Component {
state = {
count: 0
}
render() {
return (
<div>
<User data={this.props.user} />
<div>{this.state.count}</div>
<button onClick={() => this.setState(prevState => ({count: prevState.count + 1}))}>Increment</button>
</div>
)
}
}
const User = ({ data }) => (
<div>
<div>{data.id}</div>
<div>{data.name}</div>
<div>{data.surname}</div>
</div>
)
const mapStateToProps = (state) => {
return {
user: state.user
}
}
const ContainerApp = connect(mapStateToProps)(App)
In the above example App
in itself is a presentation component along with a smart component as it handles user interaction of incrementing and showing count. However ContainerApp
is a component that is connected to redux store making use of presentational App component and is thus a container. User
component on the other hand is a dumb component along with a presentational component since it just takes some props and renders view based on it
edited Nov 20 '18 at 7:28
answered Nov 20 '18 at 7:17


Shubham KhatriShubham Khatri
80.2k1497135
80.2k1497135
please edit your answer. As i can't understand what is "A contains component".
– user10298495
Nov 20 '18 at 7:23
Sorry for the typo, I updated my answer
– Shubham Khatri
Nov 20 '18 at 7:25
Is above example for container or presentational component?
– user10298495
Nov 20 '18 at 7:26
Please check the description below the example. It explains what exactly each component is
– Shubham Khatri
Nov 20 '18 at 7:27
add a comment |
please edit your answer. As i can't understand what is "A contains component".
– user10298495
Nov 20 '18 at 7:23
Sorry for the typo, I updated my answer
– Shubham Khatri
Nov 20 '18 at 7:25
Is above example for container or presentational component?
– user10298495
Nov 20 '18 at 7:26
Please check the description below the example. It explains what exactly each component is
– Shubham Khatri
Nov 20 '18 at 7:27
please edit your answer. As i can't understand what is "A contains component".
– user10298495
Nov 20 '18 at 7:23
please edit your answer. As i can't understand what is "A contains component".
– user10298495
Nov 20 '18 at 7:23
Sorry for the typo, I updated my answer
– Shubham Khatri
Nov 20 '18 at 7:25
Sorry for the typo, I updated my answer
– Shubham Khatri
Nov 20 '18 at 7:25
Is above example for container or presentational component?
– user10298495
Nov 20 '18 at 7:26
Is above example for container or presentational component?
– user10298495
Nov 20 '18 at 7:26
Please check the description below the example. It explains what exactly each component is
– Shubham Khatri
Nov 20 '18 at 7:27
Please check the description below the example. It explains what exactly each component is
– Shubham Khatri
Nov 20 '18 at 7:27
add a comment |
1
I tried above question on searching google even on stackoverflow - no wonder. There's no such thing as 'component in redux'. Redux doesn't deal with components. React does.
– estus
Nov 20 '18 at 7:16
Oh, sorry. I forgot to write react instead of redux.
– user10298495
Nov 20 '18 at 7:22