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;
};

Your store config looks neat just like your action. I would say the remaining possibility to investigate lies at your component, if you could share it. — Rafael Buzatto de Campos
– Rafael Buzatto de Campos, Commented Jan 9, 2021 at 20:13

Rafael Buzatto de Campos · Accepted Answer · 2021-01-05 16:51:13Z

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.

edited Jan 5, 2021 at 16:51

answered Jan 5, 2021 at 16:46

Rafael Buzatto de Campos

10.5k6 gold badges29 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

asdkf Over a year ago

yes, but i have redux thunk from there redux-toolkit.js.org/usage/usage-guide

Rafael Buzatto de Campos Over a year ago

The error is explicit about the lack of async Middleware proper config. The code looks fine. You should add your store configuration to your question, and it may useful also add a sandbox with the issue.

asdkf Over a year ago

i added fetch and store

Collectives™ on Stack Overflow

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

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related