React Redux container component

Question

I am writing a simple React + Redux Container Component. Given below is the code

export default class LoginContainerComponent extends React.Component {

    constructor() {
        super();
        connect( this.mapStateToProps, this.mapDispatchToProps )( LoginComponent )
    }

    render() {
        return (<LoginComponent></LoginComponent>);
    }

    mapStateToProps( state ) {
        return {
            loginText: 'Login'
            ,
            registerText: 'Register'
        }
    }

    mapDispatchToProps( dispatch ) {
        return {
            onLoginClick: () => {
                alert( 'login clicked' );
            },
            onRegisterClick: () => {
                alert( 'register clicked' );
            }
        }
    };
 }

I have a few questions surrounding this 1. Is this overall approach correct, specifically where I define the connect( in the constructor? A lot of the examples I have seen define connect outside the component, but if I define this outside the component then I do not have access to mapStateToPrope, and mapDispatchToProps which I think should be inside the component.

Jo Peyper · Accepted Answer · 2017-02-17 05:55:52Z

3

The connect function is a high order component (HOC) and doesn't need to be a defined as a class itself. The redux document has some examples of how to do this. They are using ES6 syntax which you may not, so the below is equivalent for you.

function mapStateToProps(state) {
    return {
        loginText: 'Login'
        ,
        registerText: 'Register'
    }
}

function mapDispatchToProps(dispatch) {
    return {
        onLoginClick: () => {
            alert('login clicked');
        },
        onRegisterClick: () => {
            alert('register clicked');
        }
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(LoginComponent)

answered Feb 17, 2017 at 5:55

Jo Peyper

3901 silver badge10 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

patrick · Accepted Answer · 2017-02-17 05:57:05Z

1

Here you go.

class LoginContainerComponent extends React.Component {

    constructor(props) {
        //you actually dont need this atm
        super(props);
    }

    render() {
        return (<LoginComponent></LoginComponent>);
    }
 }

const mapStateToProps = state => ({
    loginText: 'Login',
    registerText: 'Register'
});

const mapDispatchToProps = dispatch => ({
    onLoginClick: () => alert('login clicked'),
    onRegisterClick: () => alert('register clicked')
});

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

answered Feb 17, 2017 at 5:57

patrick

10.3k4 gold badges23 silver badges27 bronze badges

Comments

Kelvin De Moya · Accepted Answer · 2017-02-17 05:55:01Z

0

It's a good practice to have your component and a separate container. It's called Presentational and Container components, you can read more in this Medium post by the creator of Redux. But basically the idea is that you keep your mapStateToProps and mapDispatchToProps outside of your component, which will receive everything it needs as a prop.

answered Feb 17, 2017 at 5:55

Kelvin De Moya

5,7041 gold badge20 silver badges16 bronze badges

Collectives™ on Stack Overflow

React Redux container component

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related