React Redux - pass data down to components via props or connect
<p>I'm working on React Redux app and I have quite fundamental question about some kind of best practises.</p>

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

<pre class="lang-jsx prettyprint-override"><code>class MainComponent extends React.Component {
  componentDidMount(){
    this.fetchData()
  }
  fetchData() {
    this.props.fetchDataAction()
  }
  render() {
    return (
      &lt;div&gt;
        &lt;ChildComponent1 /&gt;
        &lt;ChildComponent2 /&gt;
      &lt;/div&gt;
    )
  }
}
export default connect(mapStateToProps,{fetchDataAction})(MainComponent)
</code></pre>

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

<p>First solution:</p>

<pre class="lang-jsx prettyprint-override"><code>class MainComponent extends React.Component {
...
render() {
  return (
    &lt;div&gt;
      &lt;ChildComponent1 dataOne={this.props.data.one} /&gt;
      &lt;ChildComponent2 dataTwo={this.props.data.two} /&gt;
    &lt;/div&gt;
  )
}
...
</code></pre>

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

<pre class="lang-jsx prettyprint-override"><code>class ChildComponent1 extends React.Component {
  render() {
    return (
      &lt;div&gt;
        {this.props.one}
      &lt;/div&gt;
    )
  }
}
function mapStateToProps(state){
  return (
    one: state.one
  )
}
export default connect(mapStateToProps,null)(ChildComponent1)
</code></pre>

<p>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.</p>