我想调用Action onSubmit Redux表单

时间:2019-07-02 06:31:34

标签: javascript reactjs redux

我现在要在“操作”文件夹中执行操作,我想访问“发送新消息” 到我的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>
        )
    }
}

预先感谢

2 个答案:

答案 0 :(得分:0)

    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)

答案 1 :(得分:0)

简单的方法是导入store并从redux导入dispatch。然后致电store.dispatch(action.sendNewMessage)。请记住,这里的store是您使用createStore方法创建的商店的实例。但是,理想的方法是使用react-redux