[Solved] Error: Actions must be plain objects. Instead, the actual type was: ‘function’. You may need to add middleware to your store setup to handle dispatching other values, such as ‘redux-thunk’ to handle dispatching functions.

Error: Actions must be plain objects. Instead, the actual type was: ‘function’. You may need to add middleware to your store setup to handle dispatching other values, such as ‘redux-thunk’ to handle dispatching functions. See https://redux.js.org/tutorials/fundamentals/part-4-store#middleware and https://redux.js.org/tutorials/fundamentals/part-6-async-logic#using-the-redux-thunk-middleware for examples.

Problem:

Dispatch the action method is not working

const statusUpdateAction = (value) => {
  return {
    type: 'UPDATE_STATUS',
    value
  }
}
document.forms.selectStatus.status.addEventListener("change", (e) => {
  store.dispatch(statusUpdateAction);
});

Solution

In my case, I just have forgotten to call my action function with parentheses. simple mistake was throwing a big error ;).

const statusUpdateAction = (value) => {
  return {
    type: 'UPDATE_STATUS',
    value
  }
}
document.forms.selectStatus.status.addEventListener("change", (e) => {
  store.dispatch(statusUpdateAction());  // <= () Here was what I've missed.
});

Summary

Instead of pass the action object, I just mentioned the function name that’s the reason I was facing the issue, I hope you find them helpful.