React Redux - pass data down to components via props or connect

Question

I'm working on React Redux app and I have quite fundamental question about some kind of best practises.

I have MainComponent (kind of container) where I'm fetching data on componentDidMount:

class MainComponent extends React.Component {
  componentDidMount(){
    this.fetchData()
  }
  fetchData() {
    this.props.fetchDataAction()
  }
  render() {
    return (
      <div>
        <ChildComponent1 />
        <ChildComponent2 />
      </div>
    )
  }
}
export default connect(mapStateToProps,{fetchDataAction})(MainComponent)

How to pass fetched data to ChildComponents? What is the best practise? Two possible solutions are (IMHO - maybe more?)

First solution:

class MainComponent extends React.Component {
...
render() {
  return (
    <div>
      <ChildComponent1 dataOne={this.props.data.one} />
      <ChildComponent2 dataTwo={this.props.data.two} />
    </div>
  )
}
...

Second solution - connect ChildComponents to store which is updated by fetchDataAction() in MainComponent:

class ChildComponent1 extends React.Component {
  render() {
    return (
      <div>
        {this.props.one}
      </div>
    )
  }
}
function mapStateToProps(state){
  return (
    one: state.one
  )
}
export default connect(mapStateToProps,null)(ChildComponent1)

Now I use first solution when ChildComponents do not fire actions which update store and second solution when they do. But I'm not sure if it is proper approach.

Answer 1

If you have multiple child components and you have to pass a part of fetched data to different child components ; I would suggest keep the parent component as single point of source.

You can try something like:-

class 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
      <div>
        <ChildComponent1 data={data.one}/>
        <ChildComponent2 data={data.two}/>
      </div>
    )
  }
}

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

I feel all logic stays at one place this way. Say if you plan to add to add few more child components in future,you only need to add a line of code above and few changes in API. However if you read in each component you have connect that component to store again which makes it more complex.

So if you dont have any other logic in your child components apart from getting data I would keeping this logic in the parent component.