CODEWITHSUNDEEP
reactjsredux
Steven Matthews
Steven Matthews

Reputation: 11325

Error: Actions may not have an undefined "type" property

I am new to Redux, semi-new to React. I've made a few simple applications with it. I understand the basic concept of Redux (storing state in a central location) which sounds more elegant than passing things along via components/props.

However, I am getting the following error:

Error: Actions may not have an undefined "type" property. Have you misspelled a constant?

onSubmit
src/containers/Login.js:28
  25 | 
  26 | const mapDispatchToProps = (dispatch) => ({
  27 |   onSubmit: (username, password) => {
> 28 |     dispatch(login(username, password))
  29 |   }
  30 | })
  31 | 

LoginForm._this.onSubmit
src/components/LoginForm.js:29
  26 | 
  27 | onSubmit = (event) => {
  28 |   event.preventDefault()
> 29 |   this.props.onSubmit(this.state.username, this.state.password)
  30 | }
  31 | 
  32 | render() {

As you can see, there appears to be an issue with the dispatch line in Login.js.

Login.js looks like this:

import React from 'react'
import { connect } from 'react-redux'
import { Redirect } from 'react-router'

import LoginForm from '../components/LoginForm'
import {login} from  '../actions/auth'
import {authErrors, isAuthenticated} from '../reducers'

const Login = (props) => {
  if(props.isAuthenticated) {
     return  <Redirect to='/' />
  }

  return (
     <div className="login-page">
       <LoginForm {...props}/>
    </div>
  )
}

const mapStateToProps = (state) => ({
  errors: authErrors(state),
  isAuthenticated: isAuthenticated(state)
})

const mapDispatchToProps = (dispatch) => ({
  onSubmit: (username, password) => {
    dispatch(login(username, password))
  }
})

export default connect(mapStateToProps, mapDispatchToProps)(Login);

My guess based on what I've been googling is that I'm not actually missing any sort of type data, but there's actually probably a problem somewhere in my middleware.

What might be going on? How would I troubleshoot this or interpret it?

EDIT - here's my login function:

export const login = (username, password) => ({
  [RSAA]: {
    endpoint: '/api/auth/token/obtain/',
    method: 'POST',
    body: JSON.stringify({username, password}),
    headers: { 'Content-Type': 'application/json' },
    types: [
      LOGIN_REQUEST, LOGIN_SUCCESS, LOGIN_FAILURE
    ]
  }
})

Upvotes: 1

Views: 601

Answers (1)

Isaac
Isaac

Reputation: 12894

There is a certain 'boilerplate' that we need to follow when using redux. Based on the error message, it simply means dispatch action is expecting an object with type property 

dispatch({ type: 'ACTION_TYPE', .... });

so depending on what login(username, password) return, redux dispatch will expect an object with property type

Upvotes: 1

Related Questions