Skip to content

Instantly share code, notes, and snippets.

@nesbtesh
Last active May 16, 2017 19:06
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save nesbtesh/96b37b8b9d6997359a90fc7cae31523d to your computer and use it in GitHub Desktop.
Save nesbtesh/96b37b8b9d6997359a90fc7cae31523d to your computer and use it in GitHub Desktop.
Parent container in React Redux
class Container extends React.Component {
render(){
const { props } = this;
return(
<div className="main-content">
{
React.Children.map(this.props.children, function(child) {
return React.cloneElement(
child,
{ ...props }
);
})
}
</div>
);
}
}
const mapStateToProps = (state) => {
return state;
};
function mapDispatchToProps(dispatch) {
return {
actions: bindActionCreators(actions, dispatch)
};
}
export default connect(
mapStateToProps,
mapDispatchToProps
)(Container);
@timbuckley
Copy link

timbuckley commented Aug 23, 2016

The indentation is kind of weird, also I recommend using const over var.

class Container extends React.Component {
  render() {
    const { props } = this;
    return (
      <div className="main-content">
        {  
          React.Children.map(this.props.children, (child) => {
            return React.cloneElement(child, { ...props });
          })
        }
      </div>
    );
  }
}

const mapStateToProps = (state) => {
  return state;
};

function mapDispatchToProps(dispatch) {
  return {
    actions: bindActionCreators(actions, dispatch)
  };
}

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(Container);

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment