Действия Redux должны быть ошибкой простых объектов

Question

Я разрабатываю приложение с использованием ReactJS. Раньше я не использовал избыточность и получаю сообщение об ошибке. У меня есть следующий код:

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. и я не могу понять, в чем проблема.

Answer 1

Как вы предлагаете в комментариях, поскольку вы не хотите sh обновлять состояние избыточности на основе запроса API, вы можете просто преобразовать свою функцию в обычную функцию вместо действия

Также учтите установка состояния пустым только в случае успешного запроса 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})
        })
}