Redux dispatch actions from container component - redux

Question

I have the following container component
import { connect } from "react-redux";
import LoginComponent from "./Login";
import React from "react";
export class LoginContainerComponent extends React.Component {
constructor( props ) {
super( props )
}
login( username, password ) {
//Perform actual login here
this.props.onLoginClick();
}
render() {
return (<LoginComponent onLoginClick = {this.login} />);
};
}
const mapStateToProps = function ( state ) {
return {
currentState: 'Logged Out'
}
};
const mapDispatchToProps = function ( dispatch ) {
return {
onLoginClick: () => {
alert( 'login clicked' );
}
}
};
export default connect( mapStateToProps, mapDispatchToProps )( LoginContainerComponent );
As you can see in the render() method I am passing down the login method of the container component to the LoginComponent which is a presentation component. The idea is that
User clicks login button on the presentation component
Presentation component calls login method on the Container component given above.
The container component will do the login (This method will connect to the actual database and authenticate he user) and then call the onLoginClick method (mapDispatchToProps) passed in through the connect() method. However in the login method of the LoginContainerComponent when I try to access this.props.onLoginClick, this.props return null. Am I doing something wrong here.

Answer 1

Inside of your construction you must bind this to you login method.
import { connect } from "react-redux";
import LoginComponent from "./Login";
import React from "react";
export class LoginContainerComponent extends React.Component {
constructor( props ) {
super( props )
this.login = this.login.bind(this);
}
login( username, password ) {
//Perform actual login here
this.props.onLoginClick();
}
render() {
return (<LoginComponent onLoginClick = {this.login} />);
};
}
const mapStateToProps = function ( state ) {
return {
currentState: 'Logged Out'
}
};
const mapDispatchToProps = function ( dispatch ) {
return {
onLoginClick: () => {
alert( 'login clicked' );
}
}
};
export default connect( mapStateToProps, mapDispatchToProps )( LoginContainerComponent );
This is needed because if you pass only the function to the component this is not available anymore. But if you "force"-bind to the method it is available.

Answer 2

react-redux can provide this type of thing for you without having to create your own container class using the rarely used third parameter of the connect function: mergeProps.
import { connect } from "react-redux";
import LoginComponent from "./Login";
import React from "react";
const mapStateToProps = function ( state ) {
return {
currentState: 'Logged Out'
}
};
const mapDispatchToProps = function ( dispatch ) {
return {
onLoginClicked: () => {
alert( 'login clicked' );
}
}
};
const mergeProps = function ( stateProps, dispatchProps ) {
return {
...stateProps,
onLoginClicked: (username, password) -> {
//Perform actual login here
dispatchProps.onLoginClicked()
}
}
};
export default connect( mapStateToProps, mapDispatchToProps, mergeProps )( LoginComponent );
This also bypasses the need to bind the login function of you container.