Я хочу вызвать Action onSubmit избыточную форму

Question

Я выполнил действие в своей папке действий, теперь я хочу получить доступ к "отправить новое сообщение" к моей функции handleSubmit Ниже мой код действия:

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
  })

теперь я хочу получить к нему доступ в функции формы handleSubmit. Ниже мой код для файла message.jsx

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>
        )
    }
}

Заранее спасибо

Answer 1

Простой способ - импортировать store и импортировать dispatch из избыточного числа. Затем позвоните store.dispatch(action.sendNewMessage). Помните, что store - это ваш экземпляр магазина, созданный методом createStore. Но идеальный способ сделать это - использовать react-redux.

Answer 2

    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)