Dispatch Action to my handleSubmit() I have to save it in Array [ ]

Question

I want to dispatch action into my handleSubmit function, so I can get values from the input and can save it to message[]

following is my code where I am stuck :

import React from 'react';
import SubMenu from './SubMenu';
import MessageForm from './form/MessageForm';
import { sendNewMessage } from '../../actions/messages.actions'
import {connect} from 'react-redux';


class Messages extends React.PureComponent {
    handleSubmit = (e) => {
      this.props.sendNewMessage(e);

    }
    render() {
        return (
            <section className="page-notifications"> 
                <SubMenu/>
                <MessageForm onSubmit={this.handleSubmit}/>
            </section>
        )
    }
}
    const mapDispatchToProps = dispatch => {
      return {
        sendNewMessage: (msg) => dispatch(sendNewMessage(msg)),
      }
    }

export default connect(null,mapDispatchToProps)(Messages)

basically, I just have to dispatch an action to code block :

class Messages extends React.PureComponent {
    handleSubmit = (e) => {
      this.props.sendNewMessage(e);

    }

Answer 1

So I got the answer to this Question, we just have to pass values to our handleSubmit function and call it in props. following is the code block for this solution:

 handleSubmit = (values) => {
      const { sendNewMessage } = this.props;
      sendNewMessage(values);
      console.log(values)
    }

Mind it, it will do nothing on its own we need to make some changes into our sagas file. but we can pass a console.log(values) to check our input response in our console