Summary page with react-redux: container or presentational component

Question

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((
          <Merchant
            type={key}
            key={id}
            date={row.date}
            name={row.name}
            amount={row.amount}
            delete={() => this.props.onDeleteRow(row.id, key)} />
      ));
    }
  };
    return (
      <div className={classes.List}>
        {merchList}
      </div>

    )
  }
}


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

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

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

and a Merchant component

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

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 => {
  return (
   <div>
    <MerchantContainer />
    <ReviewsContainer />
   </div>
 );
} 

And use a Switch Component in App.js

<Switch>
        <Route path="/merchants" component={MerchantContainer} />
        <Route path="/reviews" component={ReviewsContainer} />
        <Route path="/summary" component={Summary} />
</Switch>

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.

Answer 1

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.