Now, we need to connect the React component with Redux. For this, we use the function connect from: react-redux. We've already used these functions in Chapter 1, Understanding Redux. Let's modify our container, as shown in the following code:

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { compose } from 'redux';
import Form from './Form';
import { onRegisterRequest } from './actions';

class RegisterPage extends Component {
  render() {
    return (
      <div className="register-containers">
           <Form onSubmit={this.props.onSubmit} />
      </div>
    );
  }
}

export const mapDispatchToProps = dispatch => ({
  onSubmit: e => dispatch(onRegisterRequest(e.toJS())),
});

const withConnect = connect(
  null,
  mapDispatchToProps,
);

export default compose(
  withConnect,
)(RegisterPage);

There are several things going on here. Let's try to break down the code into understandable steps, as follows:

1. The React RegisterPage component displays the form as shown in Figure 5.3. We are connecting the component with Redux. To do so, we use the connect function from react-redux, which connects the React component with the Redux store. As described in their documentation website, connect can take four parameters (https://react-redux.js.org/api/connect#connect). Most of the time, we only have the need for mapStateToProps and mapDispatchToProps.
2. As the name suggests, mapStateToProps takes the state as input and maps into individual props. When specified, mapStateToProps helps the wrapper component (RegisterPage) to subscribe to Redux store updates, meaning that if the store has updated this function will be called. In our case, we do need to map state to props for the register page, so we simply pass null for now.
3. Similarly, mapDispatchToProps is the second parameter for connect, which may either be an object, function, or null. As the name suggests, this function helps to create a dispatch function that can be passed to the component as props. For example, in our case, when a form is submitted, we want to dispatch the submit function.
4. Now, we can connect the component with redux with the help of the compose function. We have discussed the compose function as a higher-order function in Chapter 1, Understanding Redux.
5. We defined the onSubmit function inside mapDispatchToProps, and passed mapDispatchToProps to connect as parameters. onSubmit is passed to the Form component as props.
6. Now having these components connected, if you execute a console log inside an onRegisterRequest function inside your action and submit the form, you should see the log inside your browser as shown in Figure 5.6. If you see the log in your browser, that means you are following correctly so far, and you are on right track. If you are getting an error, please try to pause here and go back to previous chapters and try to follow the steps again:

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

The browser will look like the following: