Summary page with react-redux: container or presentational component I'm building a Summary page for merchant activity in a marketplace with react and redux.

The application has already a structure where there is a "MerchantContianer"

class MerchantContainer extends Component {
  render() {
    const merchList = [];
    for(let key in this.props.merchants) {
      for(let id in this.props.merchants[key].byId) {
        let row = this.props.merchants[key].byId[id];
        merchList.push((
          &lt;Merchant
            type={key}
            key={id}
            date={row.date}
            name={row.name}
            amount={row.amount}
            delete={() =&gt; this.props.onDeleteRow(row.id, key)} /&gt;
      ));
    }
  };
    return (
      &lt;div className={classes.List}&gt;
        {merchList}
      &lt;/div&gt;

    )
  }
}


const mapStateToProps = state =&gt; {
  return {
      merchants: state.list.merchants
  };
};

const mapDispatchtoProps = dispatch =&gt; {
  return {
    onDeleteRow: (id, type) =&gt; {dispatch(actions.deleteMerchantsFromList(id, type))}
  };
};

export default connect(mapStateToProps, mapDispatchtoProps)(MerchantContainer);


and a Merchant component

const Merchant = props =&gt; {
  const classArr = [classes.Merchant, classes[props.type]].join(' ');
  return (
    &lt;li className={classArr}&gt;
      &lt;span&gt;{props.name}&lt;/span&gt;
      &lt;span&gt;{props.date}&lt;/span&gt;
      &lt;span&gt;{props.amount}&lt;/span&gt;
      &lt;Button click={props.delete} btnType="Delete"&gt;Delete&lt;/Button&gt;
    &lt;/li&gt;
  )
};

export default Merchant;


In addition there is a ReviewsContainer with the same structure of MerchantContainer but for a list of reviews (with a Review container with the same structure of Merchant).

Now I want to create a Summary component 

const Summary = props =&gt; {
  return (
   &lt;div&gt;
    &lt;MerchantContainer /&gt;
    &lt;ReviewsContainer /&gt;
   &lt;/div&gt;
 );
} 


And use a Switch Component in App.js

&lt;Switch&gt;
        &lt;Route path="/merchants" component={MerchantContainer} /&gt;
        &lt;Route path="/reviews" component={ReviewsContainer} /&gt;
        &lt;Route path="/summary" component={Summary} /&gt;
&lt;/Switch&gt;


It is ok to use a "dumb" component for the Summary component? Or do I have to restructure so the Summary is the only container and MerchantContainer and ReviewsContainer must work with props from Summary?

One of the other features is a Dashboard component that will include the Summary and other components (is still not defined in the requirements for this task). So this dilemma will be repeated.
In my opinion (which also aligns with the official Redux FAQ ("Should I only connect my top component, or can I connect multiple components in my tree?"):


If MerchantContainer and ReviewContainer use mostly the same state or actions, you could reduce duplication by having a common container for both of those.
If MerchantContainer and ReviewContainer don't have any state in common (which I think is the case here), there's no real value in having Summary as a common container. Quite the oppositive: If you'd make Summary the common container, Summary would have access to state and actions that Summary doesn't care about at all.


To summarize: It's perfectly fine to have multiple connected components that might be children of a "dumb" component. If you have a similar setup in a couple of the children, you might consider extracting a common container.