While mapStateToProps allows a component to subscribe to a store's state changes, mapDispatchToProps allows a component to dispatch actions to the store.

It is called with a reference to the store’s dispatch method, and should return an object where each key maps to a function that calls the dispatch method.

For instance, our mapDispatchToProps function may look like this:

function mapDispatchToProps (dispatch) {
   return {
     handleInputChange: (name, event) => {
       const value = event.target.value;
       const action = {
         type: 'LoginForm:update',
         field: name,
         value
       }
       dispatch(action);
     }
   };
 };

The handleInputChange key will get merged into the component's props, and be available in the component’s methods as this.props.handleInputChange. And thus, we can update the onChange prop on our Input components to onChange={this.props.handleInputChange}.