1
\$\begingroup\$

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.

\$\endgroup\$
1
\$\begingroup\$

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.

\$\endgroup\$
  • \$\begingroup\$ Yes, I'm trying to do just like you said, but sometimes planning the structure for the app is really tough, it's like a thin line between "too much information for this container" and "not a container" \$\endgroup\$ – AskaNor_29 Jan 15 at 11:03
  • \$\begingroup\$ That’s true. Experience helps with deciding between these two. But you’ll never get it perfect all the time at the first try. It helped me to consider designs as flexible that might and should change when I know more about the software (even if my reasoning was sound previously). \$\endgroup\$ – inyono Jan 15 at 11:36

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.