Now, we connect the login component that we have in app/containers/Login/index.js with Redux, as follows:

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { compose } from 'redux';
import LoginForm from './Form';
import { onLoginRequest } from './actions';
// eslint-disable-next-line
class LoginPage extends Component {
 render() {
   return (
     <div className="login-containers">
       <LoginForm onSubmit={this.props.onSubmit} />
     </div>
   );
 }
}
LoginPage.propTypes = {
 onSubmit: PropTypes.func,
};
export const mapDispatchToProps = dispatch => ({
 onSubmit: e => dispatch(onLoginRequest(e.toJS())),
});
const withConnect = connect(
 null,
 mapDispatchToProps,
);
export default compose(withConnect)(LoginPage);

By now, you should be familiar with the functions. We used HOF compose from Redux and passed with the mapStateToProps and mapDispatchToProps parameters. Now, inside the app/containers/Login/action.js, try to log in and see if the actions are being dispatched, as follows:

export const onLoginRequest = user =>console.log(user) || ({ type: LOGIN_REQUEST, user });

If you run the application, navigate to the login page, and insert an email and password, and try to log in, you can see the log being dumped on the browser console.