Действия не могут иметь неопределенное свойство типа.Вы неправильно написали постоянную в реактивах, редуксе

Question

Привет, ребята, я новичок в реакции и редукции. Когда я нажимаю кнопку отправки Form.jsx, отправляется воля, но она показывает свойство типа undefined.any idea.

Это ссылка на изображение моей ошибкиhttps://imgur.com/a/aby1bci

этот код моего магазина ниже

 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;

мой код действия ниже

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

вот мой компонент формы выглядит как код ниже

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;

Answer 1

ADD_ARTICLE тип должен быть в кавычках, например:

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

Обратите внимание, как я также реализую payload, вы также можете взглянуть на это.

Кроме того, изучите и изучите синтаксис ES6, чтобы вы могли воспользоваться мощью функций стрелок и избежать необходимости использовать так много bind(this) и впоследствии иметь более чистый код.

Answer 2

Я думаю, что ваш метод mapDispatchToProps неправильный.Это должно быть что-то вроде ниже:

const mapDispatchToProps = {        
   addArticle 
}