为什么在没有异步操作时出现错误 "Actions must be plain objects. Use custom middleware for async actions."？

Question

我试图更深入地了解 React 并卡在这个错误上。它不允许我派遣任何行动。但是，我根本没有使用异步。 Here you can find codesandbox of the full app.

我已将 thunkMiddleware 添加到商店，因此该应用程序可以运行。但是我不明白这是怎么回事？

这是动作制作器，里面我就不展开了。我搜索了不同的相似答案，所有这些都与错误使用有关异步操作。我的是同步的：

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

Answer 1

如果您不想使用 thunkMiddleware，您需要像这样更新您的 cartActions：

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

简单地说，您只需要 return 一个动作，该动作必须是类型为属性的对象和可选的有效负载。

codesandbox

为什么在没有异步操作时出现错误 "Actions must be plain objects. Use custom middleware for async actions."？

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

reactjs

redux-thunk

react-redux