If mapStateToProps is a function, then the component will subscribe to changes in the store’s state. When a change occurs, the mapStateToProps function will be invoked, and is passed the store’s entire updated state. The function should extract the parts of the state that are relevant to this component, and return them as an object literal. This object literal will then be merged with the props passed to the component and be available in its methods through this.props.

For our LoginForm component, we only care about the loginForm property inside the state, and so replace our current export statement:

export default LoginForm;

With this:

function mapStateToProps (state) {
   return state.loginForm;
 }
 export default connect(mapStateToProps)(LoginForm);

Do the same for RegistrationForm.

If a component does not need to read the state from the store, but needs to interact with the store in other ways (for example, dispatching an event), then you can use null or undefined for the mapStateToProps argument. The component would then no longer react to state changes.

The connect function itself returns a function that you can then use to wrap your component.