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.