Redux Actions must be plain objects 错误答案

【问题标题】：Redux Actions must be plain objects errorRedux Actions must be plain objects 错误
【发布时间】：2020-07-24 07:34:28
【问题描述】：

我正在使用 ReactJS 开发一个前端应用程序。我以前没有使用过 redux，我收到了一个错误。我有以下代码：

import { connect } from 'react-redux';
import PharmacistPreregisterComponent from "../components/PharmacistPreregisterComponent";
import { postPreregisteredPharmacist } from "../actions";

const mapDispatchToProps = dispatch => ({
    onClick: (email, drugstoreId, alert) => {
        dispatch(
            postPreregisteredPharmacist(email, drugstoreId, alert)
        );
    }
});

export default connect (
    null,
    mapDispatchToProps
)(PharmacistPreregisterComponent)

在 PharmacistPreregisterComponent 中的方法：

handleSubmit(event) {
        event.preventDefault();

        this.onClick(
            this.state.email,
            this.state.drugstoreId,
            this.state.alertMessage);
        this.setState({
            email: '',
            drugstoreId: '',
            alertMessage: ''
        });
    }

还有以下动作：

const PREREGISTER_PHARMACIST_SAVE_URL = "http://localhost:3000/admin/preregister/add"
export function postPreregisteredPharmacist(email, drugstoreId, alert) {
    return dispatch => {
        console.log("in action");
        return fetch(PREREGISTER_PHARMACIST_SAVE_URL, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ "email": email, "drugstoreId": drugstoreId})
        }).then ( response => {
            console.log(response);
        }).catch( error => {
            console.log(error);
        })
    }
}

提交表单时，我收到Actions must be plain objects. Use custom middleware for async actions.，但我似乎无法弄清楚问题所在。

【问题讨论】：

如果在获取时不对正文进行字符串化会怎样？
如果你想要有逻辑的动作，你需要使用像 redux-thunk 这样的中间件
@ShubhamKhatri 你是说console.log是这种情况下的问题吗？
不，您正在进行异步操作。要支持它，您需要一个自定义中间件
在这种情况下你不需要 dispatch action，你可以简单地从组件内部调用它而不涉及 redux

标签： reactjs api redux

【解决方案1】：

正如您在 cmets 中所建议的那样，由于您不希望根据 API 请求更新 redux 状态，您可以简单地将您的函数转换为普通函数而不是操作

还可以考虑仅在 API 请求成功时将状态设置为空

import PharmacistPreregisterComponent from "../components/PharmacistPreregisterComponent";
import { postPreregisteredPharmacist } from "../actions";

handleSubmit(event) {
        event.preventDefault();

        postPreregisteredPharmacist (
            this.state.email,
            this.state.drugstoreId,
            this.state.alertMessage
        ).then((response) => {
          console.log(response);
          this.setState({
            email: '',
            drugstoreId: '',
            alertMessage: ''
        });
      });

    }

export default PharmacistPreregisterComponent)

const PREREGISTER_PHARMACIST_SAVE_URL = "http://localhost:3000/admin/preregister/add"
export function postPreregisteredPharmacist(email, drugstoreId, alert) {
    return fetch(PREREGISTER_PHARMACIST_SAVE_URL, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ "email": email, "drugstoreId": drugstoreId})
        })
}

【讨论】：