Error: Actions must be plain objects. Use custom middleware for async actions. How to fix it?

Question

I've a problem with the redux action. When I submit a form the following error shows me. Network shows that data has been transferred. how to fix it? I don't know where the error may be anymore

My Error

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

  19 | const handleSumbitAddExpenses = (values) => {
  20 |   console.log(allCategories);
  21 |   allCategories.forEach(category => {
> 22 |     addExpenses({
     | ^  23 |       categoryId: category.categoryId,
  24 |       data: values,
  25 |     })



  18 | 
  19 |      const handleSumbitAddExpenses = (values) => {
  20 |        console.log(allCategories);
> 21 |        allCategories.forEach(category => {
     | ^  22 |          addExpenses({
  23 |            categoryId: category.categoryId,
  24 |            data: values,```

Redux Action

export const addExpenses = ({categoryId, data}) => async(dispatch) => {
    dispatch({
        type: ADDEXPENSES_GET_REQUEST,
    })

    try {
        const response = await API.expenses.addExpenses({
            categoryId,
            data
        });
        const data = await response.json();
        dispatch({
            type: ADDEXPENSES_GET_SUCCES,
            payload: data,
        })
    }catch (error) {
        dispatch({
            type: ADDEXPENSES_GET_FAILURE,
        })
    }

}

Function in component

      const handleSumbitAddExpenses = (values) => {
        console.log(allCategories);
        allCategories.forEach(category => {
          addExpenses({
            categoryId: category.categoryId,
            data: values,
          })
        })
        
      }

This's my Store setup its. Simple setup from redux thunk documentation.

import { applyMiddleware, createStore } from "redux";
import { composeWithDevTools } from "redux-devtools-extension";
import thunkMiddleware from "redux-thunk";

import rootReducer from "./reducers";

export default function configureStore(preloadedState) {
  const middlewares = [thunkMiddleware];
  const middlewareEnhancer = applyMiddleware(...middlewares);

  const enhancers = [middlewareEnhancer];
  const composedEnhancers = composeWithDevTools(...enhancers);

  const store = createStore(rootReducer, preloadedState, composedEnhancers);

  if (process.env.NODE_ENV !== "production" && module.hot) {
    module.hot.accept("./reducers", () => store.replaceReducer(rootReducer));
  }

  return store;
}

and my fetch

export const addExpenses = ({ categoryId, data }) => {
  const promise = fetch(
    `
    ${process.env.REACT_APP_API_URL}/categories/${categoryId}/transactions`,
    {
      method: "POST",
      headers: {
        "Content-type": "application/json",
      },
      body: JSON.stringify(data),
    }
  );

  return promise;
};

Answer 1

at first redux actions should return plain objects only. However you are returning another function that takes dispatch as parameter to run some async code.

this action implementation is typical from redux-thunk middleware. redux-thunk intercepts the dispatch call if you return another function, enabling you to make async requests. But first you need to install redux-thunk npm install redux-thunk, then apply it as middleware at your store creation like:

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers/index';

const store = createStore(rootReducer, applyMiddleware(thunk));

once your middleware is properly implemented your actions that make async calls should work as expected.