我想调用Action onSubmit Redux表单

Question

I made action on my actions folder now I want to access "send new message" to my handleSubmit function Below is my action code :

export const types = {
    MESSAGES: {
      SYNC: 'MESSAGES.SYNC',
      NEW: {
        CHANGE: 'MESSAGES.NEW.CHANGE',
        SEND: 'MESSAGES.NEW.SEND'
      }
    }
  }

  export const syncMessages = messages => ({
    type: types.MESSAGES.SYNC,
    messages
  })

  export const changeNewMessage = text => ({
    type: types.MESSAGES.NEW.CHANGE,
    text
  })

  export const sendNewMessage = () => ({
    type: types.MESSAGES.NEW.SEND
  })

now I want to access it on my form "handleSubmit" function Below is my code for message.jsx file

import React from 'react';
import SubMenu from './SubMenu';
import MessageForm from './form/MessageForm';
import * as action from "../../actions/messages.actions";

export default class Messages extends React.PureComponent {
    handleSubmit = (e) => {
       console.log(e.target.value)
      }

    render() {
        return (
            <section className="page-notifications"> 
                <SubMenu/>
                <MessageForm onSubmit={this.handleSubmit}/>
            </section>
        )
    }
}

Thanks in advance

Answer 1

    import { sendNewMessage } from './path'

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

    render() {
        return (
            <section className="page-notifications"> 
                <SubMenu/>
                <MessageForm onSubmit={this.handleSubmit}/>
            </section>
        )
    }
}

    const mapDispatchToProps = dispatch => {
      return {
        // dispatching plain actions
        sendNewMessage: () => dispatch(sendNewMessage()),
      }
    }

export default connect(
  null,
  mapDispatchToProps
)(Messages)

Answer 2

The simple way is to import your store and import dispatch from redux. Then call store.dispatch(action.sendNewMessage) . Remember that the store here is your instance of store created using createStore method. But, ideal way to do it is via using react-redux .