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

Admin 1
Viewed 6241

hello guys i'm new to react and redux .when i click a submit button Form.jsx an will dispatch but it shows type property undefined.any idea.

This is the image link of my error https://imgur.com/a/aby1bci

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;
react-redux redux reactjs middleware
2 Answers

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.

user_67198190

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

const mapDispatchToProps = {        
   addArticle 
}
user_71676310
Related