reduxjs / redux

A JS library for predictable global state management
https://redux.js.org
MIT License
60.91k stars 15.27k forks source link

getting error : Cannot read property 'type' of undefined #3463

Closed reactwo closed 5 years ago

reactwo commented 5 years ago

I want the save the value of the input field with handeleSubmit for that I have given a piece of code in my form :

const MessageForm = ({ handleSubmit, onSubmit }) => (
  <section className="form-container register-model-form">
   <form className="message-form" onSubmit={handleSubmit(onSubmit)}>
    <Input
      label="Write a message..."
      name="message"
      type="text"
    />

while implementing my code for the handleSubmit part I am getting an error: Cannot read property 'type' of undefined

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

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 => ({
      sendNewMessage: () => dispatch(action.sendNewMessage()),
  });

export default connect(null,mapDispatchToProps)(Messages) I want to save the value as an array, for that, I wrote my code for reducer :

const messages = (state = [], action) => {
  switch (action.type) {
    case "ADD_MESSAGE":
      return state.concat([{
        message: action.payload.message,
        author: action.payload.author,
        id: action.payload.id,
      }]);
    case "MESSAGE_RECEIVED":
      return state.concat([{
        message: action.payload.message,
        author: action.payload.author,
        id: action.payload.id,
      }]);
    default:
      return state;
  }
};

export default messages;

Thanks in advance

reactwo commented 5 years ago

PS: my action.js

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
  })
timdorr commented 5 years ago

The issue tracker here on GitHub is reserved for bug reports and feature requests. For usage questions (which is what I believe this is), please use Stack Overflow or Reactiflux where there are a lot more people ready to help you out. Thanks!

Please feel free to reply if you think this issue was closed prematurely.