CODEWITHSUNDEEP
reactjsreduxreact-reduxmiddleware
user7561165
user7561165

Reputation:

Actions may not have an undefined "type" property. Have you misspelled a constant in reactjs,redux

I'm new to React and Redux. When I click the submit button Form JSX it will dispatch but it shows the type property undefined. Any idea?

This is the image link of my error https://i.sstatic.net/JEf3u.jpg

this my store code below

 import { createStore, applyMiddleware, compose } from "redux";
 import rootReducer from "../reducers/index";
 import { forbiddenWordsMiddleware } from "../middleware";

 const storeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || 
 compose;

 const store = createStore(
   rootReducer,
   storeEnhancers(applyMiddleware(forbiddenWordsMiddleware))
 );
 export default store;

my action code below

import { ADD_ARTICLE } from "../constants/action-types";
export function addArticle(payload) {
  return { type: ADD_ARTICLE, payload };
}

here is my Form component looks like below code

import React, { Component } from "react";
import { connect } from "react-redux";
import uuidv1 from "uuid";
import { addArticle } from "../actions/index";

function mapDispatchToProps(dispatch) {
    return {
        addArticle: article => dispatch(addArticle(article))
    };
}
class ConnectedForm extends Component {
    constructor() {
        super();
        this.state = {
            title: ""
        };
        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }
    handleChange(event) {
        this.setState({ [event.target.id]: event.target.value });
    }
    handleSubmit(event) {
        event.preventDefault();
        const { title } = this.state;
        const id = uuidv1();
        this.props.addArticle({ title, id });
        this.setState({ title: "" });
    }
    render() {
        const { title } = this.state;
        return (
            <form onSubmit={this.handleSubmit}>
                <div className="form-group">
                    <label htmlFor="title">Title</label>
                    <input
                        type="text"
                        className="form-control"
                        id="title"
                        value={title}
                        onChange={this.handleChange}
                    />
                </div>
                <button type="submit" className="btn btn-success btn-lg">
                    SAVE
                </button>
            </form>
        );
    }
}
const Form = connect(
    null,
    mapDispatchToProps
)(ConnectedForm);
export default Form;

Upvotes: 6

Views: 11616

Answers (2)

Daniel
Daniel

Reputation: 15413

ADD_ARTICLE type should be in quotes like so:

// Action creator
export const addArticle = (article) => {
  // returns an action
  return {
    type: 'ADD_ARTICLE',
    payload: article
  };
};

Notice how I implement the payload as well, you may want to take a look at that too.

Additionally, study and review ES6 syntax so you can avail yourself of the power of arrow functions and avoid having to use so many bind(this) and subsequently have cleaner code.

Upvotes: 6

mstfyldz
mstfyldz

Reputation: 482

I think your mapDispatchToProps method is wrong. It must be something like below:

const mapDispatchToProps = {        
   addArticle 
}

Upvotes: 0

Related Questions