React-Redux: Actions must be plain objects. Use custom middleware for async actions

You have to dispatch after the async request ends.

This would work:

export function bindComments(postId) {    return function(dispatch) {        return API.fetchComments(postId).then(comments => {            // dispatch            dispatch({                type: BIND_COMMENTS,                comments,                postId            });        });    };}

For future seekers who might have dropped simple details like me, in my case I just have forgotten to call my action function with parentheses.

actions.js:

export function addNewComponent() {  return {    type: ADD_NEW_COMPONENT,  };}

myComponent.js:

import React, { useEffect } from 'react';import { addNewComponent } from '../../redux/actions';  useEffect(() => {    dispatch(refreshAllComponents); // <= Here was what I've missed.  }, []);

I've forgotten to dispatch the action function with (). So doing this solved my issue.

  useEffect(() => {    dispatch(refreshAllComponents());  }, []);

Again this might have nothing to do with OP's problem, but I hope I helps people with the same problem as mine.

The error is simply asking you to insert a Middleware in between which would help to handle async operations.

You could do that by :

npm i redux-thunk

        Inside index.jsimport thunk from "redux-thunk"         ...createStore(rootReducers, applyMiddleware(thunk));

Now, async operations will work inside your functions.