Why the error "Actions must be plain objects. Use custom middleware for async actions." appears, when there are no async actions?

Question

I was trying to figure out React deeper and stuck on this error. It didn't allow me to dispatch any actions. However, I'm not using async at all. Here you can find codesandbox of the full app.

I've added thunkMiddleware to the store, so the app will work. However I can't understand what is going on?

Here are the action creators, inside which I cloudn't dispatch. I've searched for different similar answers, and all those were connected to incorrect usage of async actions. Mine are sync:

import CART_ACTIONS from "../action_types/cartActionTypes";

function addToCart(item) {
  return dispatch => dispatch({ type: CART_ACTIONS.ADD_ITEM, item: item });
}

function removeFromCart(item) {
  return dispatch => {
    dispatch({ type: CART_ACTIONS.REMOVE_ITEM, item });
  };
}

function clearCart(item) {
  return dispatch => {
    dispatch({ type: CART_ACTIONS.CLEAR_CART });
  };
}

export const cartActions = { addToCart, removeFromCart, clearCart };

Remove applyMiddleware(thunkMiddleware). I've updated the link. You can open the sandbox console(under the app view, left bottom corner), there you'll see an error. — Animus
– Animus, Commented Dec 5, 2019 at 19:40
Why do you remove applyMiddleware(thunkMiddleware) if it works with it? — SuleymanSah
– SuleymanSah, Commented Dec 5, 2019 at 19:41
@SuleymanSah, that is a great question :D. However I'm not using any async calls and want to know, why is this happening at all? — Animus
– Animus, Commented Dec 5, 2019 at 19:41

SuleymanSah · Accepted Answer · 2019-12-05 19:51:11Z

1

You need to update your cartActions like this, if you don't want to use thunkMiddleware:

import CART_ACTIONS from "../action_types/cartActionTypes";

function addToCart(item) {
   return({ type: CART_ACTIONS.ADD_ITEM, item: item });
}

function removeFromCart(item) {
    return({ type: CART_ACTIONS.REMOVE_ITEM, item });

}

function clearCart(item) {
    return({ type: CART_ACTIONS.CLEAR_CART });
}

export const cartActions = { addToCart, removeFromCart, clearCart };

Simply, you just need to return an action which must be an object with type property and optionally a payload.

codesandbox

edited Dec 5, 2019 at 19:51

answered Dec 5, 2019 at 19:44

SuleymanSah

18k6 gold badges38 silver badges60 bronze badges

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

3 Comments

Animus Over a year ago

So I don't have to use dispatch for that? I mean dispatch({ type: CART_ACTIONS.CLEAR_CART }). What you are saying is, this object is passed to dispatch?

SuleymanSah Over a year ago

@Animus you shouldn’t use dispatch if you don’t have async action. Returning a simple object as I showed in the answer is one of the fundamentals of redux.

SuleymanSah Over a year ago

@Animus you are welcome, I would appreciate if you can upvote.

Collectives™ on Stack Overflow

Why the error "Actions must be plain objects. Use custom middleware for async actions." appears, when there are no async actions?

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