Javascript 带有自定义方法的异步操作对Usereducer作出反应

我正在尝试使用上下文API和useReducer钩子构建一个购物车，我有这个功能，用户需要点击按钮向购物车添加物品，应用程序将发出api请求在服务器上添加物品，并将物品返回到前端，应用程序将发送更新UI的操作，以及从购物车中删除物品的操作，但问题是，在我刷新页面之前，应用程序不会更新UI

  const handleAddingToCart = async () => {
    setLoading(true);
    const response = await addToCart({ itemId: id, quantity: 1 }, token);
    setLoading(false);

    cartDispatch({
      type: "ADD_ITEM",
      payload: response.data.data,
    });
  };

大车减速器：

case "ADD_ITEM": {
      return {
        ...state,
        items: [...state.items, action.payload],
      };
    }

    case "REMOVE_ITEM": {
      return {
        ...state,
        items: state.items.filter((item) => item !== action.payload),
      };
    }

---

这是我处理此问题的功能，希望你们能提供帮助，非常感谢。

能否显示您的响应数据结构？响应是添加到购物车中的新项目。嘿，Eugen，非常感谢您的评论。我只是想让您知道，我成功地解决了这样的问题，但我不确定是否遵循了最佳实践，我所做的就是，我将remove item的大小写更改为：case“remove_item”：{const itemIndex=state.items.findIndex（ie=>ie.itemId==action.payload）返回{…state，items:[…state.items.slice（0，itemIndex），…state.items.slice（itemIndex+1），]，}；}这是我的第一个问题，看起来很糟糕，对不起，先生。