Redux gives error "Error: Actions must be plain objects. Use custom middleware for async actions."

Question

I'm very new to redux. I tried my best to resolve this error in redux but it still gives me an error. The error is message is:

Error: Actions must be plain objects. Use custom middleware for async actions.

Please help me resolve this.

The error points to the line after return. Here is my code:

    const mapDispatchToProps = (dispatch) => {
      return{
        fetchState: (e) => dispatch(fetchState(e)),
        fetchCapital: (e) => dispatch(fetchCapital(e))
      }
    }

And fetchState is defined in my action.jsx

export const fetchState = (e) =>{
    console.log(e.target)
    return (dispatch) => {
        console.log("hey")

        axios.get('http://localhost:8080/StatesByCountry/'+ e.target.value)
                .then(response => {
                    const stateData = response.data || '';
                    dispatch(changeState(stateData));
            })
            .catch( err => {
                console.log(err);
            });
    }
}

could you share your file where you create your store? – buzatto Feb 25 '21 at 18:15 — buzatto, Feb 25 '21 at 18:15

score 0 · Answer 1 · edited Feb 25 '21 at 18:14

0

You have to use async and await :

export const fetchState = async (e) =>{

await axios.get('http://localhost:8080/StatesByCountry/'+ e.target.value)

edited Feb 25 '21 at 18:14

buzatto

9,704
5
24
33

answered Feb 20 '21 at 21:09

Emanuek-wq

1

Please check out the [formatting help page](https://stackoverflow.com/editing-help) to improve your formatting. – costaparas Feb 21 '21 at 00:46
Ca you suggest some change in mapDispatchToProps rather than fetchState? – rove Feb 21 '21 at 11:35

Redux gives error "Error: Actions must be plain objects. Use custom middleware for async actions."

1 Answers1