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

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

 
 
 

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

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

 
 
 

 )
}
...

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

 {this.props.one}
 

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

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