ReactJS – React REDUX – Pass the data to the component via PROPS or Connect

I am working on a React Redux application and I have a very basic question about some best practices.

I have MainComponent (a kind of container ) I get data on componentDidMount:

class MainComponent extends React.Component {
componentDidMount(){
this.fetchData()
}
fetchData() {
this.props.fetchDataAction()
}
render() {
return (




)
}
}
export default connect(mapStateToProps,{fetchDataAction})( MainComponent)

How to pass the acquired data to ChildComponents? What is the best practice? The two possible solutions are (IMHO-maybe more?)

First solution

class MainComponent extends React.Component {< br />...
render() {
return (




)
}
...

The second Solution-Connect ChildComponents to storage, which is updated by fetchDataAction() in MainComponent:

class ChildComponent1 extends React.Component {
render() {< br /> return (

{this.props.one}

)
}
}
function mapStateToProps(state){
return (
one: state.one
)
}
export default connect(mapStateToProps,null)(ChildComponent1)

Now I use the first solution, when ChildComponents does not trigger the operation of updating the storage and the second solution. But I am not sure if this is the correct way.

If you have multiple child components, you must pass part of the acquired data to different child components; I recommend keeping the parent component as a single Point source.

You can try the following methods: –

c lass MainComponent extends React.Component {

constructor(){
super()
this.state = {
data: {}
}
}

componentDidMount(){
this.fetchData()
}
fetchData() {
this.props.fetchDataAction()
}

componentWillReceiveProps(nextProps){
//once your data is fetched your nextProps would be updated
if(nextProps.data != this.props.data && nextProps .data.length>0){
//sets your state with you data--> render is called again
this.setState({data:nextProps.data})
}
render() {
//return null if not data
if(this.state.data.length === 0){
return null
}
return (
// it should have keys as one and two in api response




)
}
}

function mapStateToProps(state){
return (
data: state
)
}
export default connect(mapStateToProps,{fetchDataAction})( MainComponent)

I think all the logic stays in one place. Assuming you plan to add in the future to add more subcomponents, you only need to add a line of code on the API and make a few changes. However, if If you read in each component, the component has been connected to storage again, which makes it more complicated.

Therefore, in addition to fetching data, if there is no other logic in your sub-components, I will keep this logic in the parent component.

I am working on a React Redux application and I have a very basic question about some best practices.

I have MainComponent (a kind of container) and I get data on componentDidMount:

class MainComponent extends React.Component {
componentDidMount( ){
this.fetchData()
}
fetchData() {
this.props.fetchDataAction()
}
render() {
return (




)
}
}
export default connect(mapStateToProps,{fetchDataAction})(MainComponent)

How to pass the acquired data to ChildComponents? What is the best practice? The two possible solutions are (IMHO-maybe more?)

First solution

class MainComponent extends React.Component {< br />...
render() {
return (




)
}
...

The second Solution-Connect ChildComponents to storage, which is updated by fetchDataAction() in MainComponent:

class ChildComponent1 extends React.Component {
render() {< br /> return (

{this.props.one}

)
}
}
function mapStateToProps(state){
return (
one: state.one
)
}
export default connect(mapStateToProps,null)(ChildComponent1)

Now I use the first solution, when ChildComponents does not trigger the operation of updating the storage and the second solution. But I am not sure if this is the correct way.

If you have multiple child components, you must pass part of the acquired data to different child components; I recommend keeping the parent component as a single point source.

You can try the following methods: –

class MainComponent extends React.Component {

con structor(){
super()
this.state = {
data: {}
}
}

componentDidMount(){
this.fetchData()
}
fetchData() {
this.props.fetchDataAction()
}

componentWillReceiveProps(nextProps) {
//once your data is fetched your nextProps would be updated
if(nextProps.data != this.props.data && nextProps.data.length>0){
//sets your state with you data--> render is called again
this.setState({data:nextProps.data})
}
render() {
//return null if not data
if(this.state.data.length === 0){
return null
}
return (
// it should have keys as one and two in api response




)
}
}

function mapStateToProps(state){
return (
data: state
)
)
export default connect(mapStateToProps,(fetchDataAction))(MainComponent)

I think all the logic stays in one place. Assuming you plan to add in the future to add more subcomponents, you only need to add a line of code on the API and make a few changes. However, if you read in each component, the component has been connected to storage again, which makes It is more complicated.

Therefore, in addition to fetching data, if there is no other logic in your child component, I will keep this logic in the parent component.

< p>

WordPress database error: [Table 'yf99682.wp_s6mz6tyggq_comments' doesn't exist]
SELECT SQL_CALC_FOUND_ROWS wp_s6mz6tyggq_comments.comment_ID FROM wp_s6mz6tyggq_comments WHERE ( comment_approved = '1' ) AND comment_post_ID = 5934 ORDER BY wp_s6mz6tyggq_comments.comment_date_gmt ASC, wp_s6mz6tyggq_comments.comment_ID ASC

Leave a Comment

Your email address will not be published.