操作可能没有未定义的“类型”属性。你是否拼错了reactjs、redux中的常量

Question

我是 React 和 Redux 的新手。当我单击 Form JSX 的提交按钮时，它将调度，但显示类型属性未定义。任何想法？

这是我的错误的图像链接 https://i.stack.imgur.com/JEf3u.jpg

这是我的商店代码如下

 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)，从而获得更清晰的代码。