Redux Actions must be plain objects error

Question

I am developing a frontend application using ReactJS. I haven't used redux before and I am getting an error. I have the following code:

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)

In PharmacistPreregisterComponent the method:

handleSubmit(event) {
        event.preventDefault();

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

And the following action:

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);
        })
    }
}

When submitting the form I get Actions must be plain objects. Use custom middleware for async actions. and I can't seem to figure out what the problem is.

you need to use middlewares like redux-thunk if you want to have actions that have logic — Shubham Khatri, Apr 11 '20 at 15:33
@ShubhamKhatri Are you saying that the console.log is the problem in this case? — Ttt, Apr 11 '20 at 15:34
no, you are having an async operation in action. To support it you need a custom middleware — Shubham Khatri, Apr 11 '20 at 15:35
check this post https://stackoverflow.com/questions/47541032/handling-async-request-with-react-redux-and-axios/47588228#47588228 — Shubham Khatri, Apr 11 '20 at 15:35
@CyberMessiah If I do this `body: { "email": email, "drugstoreId": drugstoreId}` same thing happens — Ttt, Apr 11 '20 at 15:36
@ShubhamKhatri I checked that post, but I don't want to change the state of the application after receiving a response. What should I do in this case? — Ttt, Apr 11 '20 at 15:40
In such a case you don't need to dispatch the action, you can simply call it from within the component without involving redux — Shubham Khatri, Apr 11 '20 at 15:43

score 0 · Answer 1 · answered Apr 11 '20 at 15:46

As suggested by you in the comments, since you do not wish to update redux state based on the API request you can simply convert you function into a normal function instead of a action

Also consider setting the state to empty only if the API request is successful

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})
        })
}

Redux Actions must be plain objects error

1 Answers1