为什么我的 Redux Store 对象数组没有更新？

Question

我对 React 和 Redux 非常陌生。我正在尝试使用 Redux 构建简单的购物车功能。我已经阅读了 Redux Troubleshooting，许多关于 SO 和其他地方的解决方案。我花了很多时间在上面，但无法找出原因。

问题：

我正在从一个按钮分派 INCREASE 操作，我试图通过该按钮将整个有效负载对象附加到（最初）空的购物车数组中。当我按下按钮时 console.log() 我的购物车时，它显示该对象已成功添加到购物车数组中。但是当我检查购物车组件时，购物车没有在那里更新并显示它是空的，当我重新加载我的页面时也会发生同样的情况。在我看来，尽管 console.log() 显示我没有更新，但 state.cart 似乎没有更新。

我的 Redux Store 是：

import { createStore } from "redux";
import reducer from "./Reducer";
import { Provider } from "react-redux";
//initial store
const initialStore = {
  services: Servicesdata, //saves the offered services displayed on the salon service page
  cart: [], // intended to be array of objects
  bill: 0,
  total_items: 0, //saves total items in the cart
};

我的 Reducer.js 文件中的操作是：

import { DECREASE, INCREASE, CLEAR_CART, REMOVE } from "./Actions";
function reducer(state, action) {
    let tempCart = [...state.cart, action.payload];

    console.log("Payload is:", action.payload);
    console.log("Updated state is:", state);
    console.log("Updated Cart is:", tempCart);

    return {
      ...state,
      cart: tempCart,
    };
  }
  return state;
}

这是按钮所在的 Services.jsx：

import React from "react";
import { connect } from "react-redux";
import { INCREASE } from "./Actions";

const ServicesCard = ({
  //   id,
  serviceName,
  serviceDesc,
  price,
  increase,
}) => {
  return (
    <>
      <div className="col-md-6">
        <div className="package">
          <h5>{serviceName}</h5>
          <p>{serviceDesc}</p>
          <strong className="price">
            <small>Rs.</small>
            {price}
          </strong>
          <button
            className="addToCart"
            // onClick={() => dispatch({ type: INCREASE })}
            onClick={() => increase()}
          >
            Add
          </button>
        </div>
        {/* end package */}
      </div>
      {/* end col-md-6 */}
    </>
  );
};

// const mapStateToProps = (state) => {
//   const { cart, amount, total } = state;
//   return { cart, amount, total };
// };

const mapDispatchToProps = (dispatch, ownProps) => {
  const { id, serviceName, serviceDesc, price } = ownProps;
  //   console.log("ownProps: ", ownProps, id, price);
  return {
    increase: () =>
      dispatch({
        type: INCREASE,
        payload: { id, serviceName, serviceDesc, price },
      }),
  };
};

export default connect(null, mapDispatchToProps)(ServicesCard);

这是Cart.jsx文件的相关代码：

import React from "react";
import Nav from "./Nav";
import { connect } from "react-redux";
import { CLEAR_CART } from "./Actions";
import CartCard from "./CartCard";

    const Cart = ({ cart = [], bill, dispatch }) => {
      // console.log(cart);
      if (cart.length === 0) {
        return (
          <React.Fragment>
            <Nav />
            <header className="cart-header">
              <h2>Your Cart</h2>
              <h4>is currently empty</h4>
              {console.log("In Cart component: ", cart)}
            </header>
            <br />
          </React.Fragment>
        );
      } else {
        return (
          <React.Fragment>
            <Nav />
            <header className="cart-header">
              <h2>Your Cart</h2>
              <h4>is Full</h4>
            </header>
            <br />

            <div className="cart-items">
              {console.log("In Cart component: ", cart)}
              {cart.map((cartItem) => {
                return <CartCard key={cartItem.id} {...cartItem} />;
              })}
            </div>
            <br />
            <div className="cart-total">
              <h4>
                Total: <span>Rs. {bill}</span>
              </h4>
            </div>
            <div className="cart-actions-section">
              <button
                id="clear-cart-button"
                className="cart-buttons"
                onClick={() => dispatch({ type: CLEAR_CART })}
              >
                Clear Cart
              </button>
            </div>
            <br />

          </React.Fragment>
        );
      }
    };
    
    const mapStateToProps = (state) => {
      const { cart, quantity, bill } = state;
      console.log("cart in mapState:", cart);
      return { cart, quantity, bill };
    };
export default connect(mapStateToProps)(Cart);

请帮助我了解此问题的原因。谢谢！