mapStateTo__Props.js

/***
 * 
 * Is it ok to declare and use both `mapStateToChildListProps` and `mapStateToParentListProps` 
 * or there is a way to unify. I 'am thinkin if need more `connect()`ed comps will add more `mapStateTo__Props`.
 *
 ***/
 
const Child = ({ ...props }) => (
  <li>
    <h3>{ props.foo }</h3>
    <p>{ props.bar }</p>
  </li>
);

const ChildList = ({ nodes }) => (
  <ul>
    {Object.keys(nodes).map((node) => <Child {...nodes[node]} />)}
  </ul>
);

const mapStateToChildListProps = (state, ownProps) => {
  return {
    nodes: state.parents[ownProps.child].nodes
  };
};
const mapDispatchToChildListProps = (dispatch, ownProps) => {
  return {
    onChildClick: () => { 
      // ...
    }
  };
};
const FilteredChildList = connect(
  mapStateToChildListProps, 
  mapDispatchToChildListProps
)(ChildList);


const Parent = ({ ...props }) => (
  <li>
    <h3>{ props.name }</h3>
    <FilteredChildList child={props.child} />
  </li>
);

const ParentList = ({ parents }) => (
  <ul>
    {Object.keys(parents).map((parent) => <Parent {...parents[parent]}  />)}
  </ul>
);

const mapStateToParentListProps = (state, ownProps) => {
  return {
    parents: state.parents
  };
};
const mapDispatchToParentListProps = (dispatch, ownProps) => {
  return {
    onSetClick: () => { 
      // ...
    }
  };
};
const FilteredParenttList = connect(
  mapStateToParentListProps, 
  mapDispatchToParentListProps
)(ParentList);


const App = () => <FilteredParenttList />;