what is presentational component or container component in redux [duplicate]












-3
















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.










share|improve this 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
















-3
















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.










share|improve this 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














-3












-3








-3


1







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.










share|improve this question

















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






share|improve this question















share|improve this question













share|improve this question




share|improve this question








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














  • 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












1 Answer
1






active

oldest

votes


















0















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






share|improve this answer


























  • 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

















1 Answer
1






active

oldest

votes








1 Answer
1






active

oldest

votes









active

oldest

votes






active

oldest

votes









0















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






share|improve this answer


























  • 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
















0















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






share|improve this answer


























  • 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














0












0








0








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






share|improve this answer
















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







share|improve this answer














share|improve this answer



share|improve this answer








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



















  • 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



Popular posts from this blog

MongoDB - Not Authorized To Execute Command

in spring boot 2.1 many test slices are not allowed anymore due to multiple @BootstrapWith

Npm cannot find a required file even through it is in the searched directory