如何在React Redux中保持状态变化

Question

我正在开发一个使用redux进行状态管理的reactjs应用程序。但是我在这里遇到了一些问题。当用户单击productDetailpage.js时，我有一个add To Cart按钮，将产品添加到购物车，并且add to cart变为add to cart。但是问题出在用户使用已经显示为added to cart的任何其他产品时。我们需要刷新以使其再次add to cart。

这是我的代码

ProductDetail / BottomDrawer.js

 <Grid item xs={6}>
                    <Button
                      disableRipple={true}
                      className="btn"
                      variant="outlined"
                      onClick={addToCart}
                    >
                      {addedToCart ? "Added To Cart" : "Add To Cart"}
                    </Button>
                  </Grid>

addToCartActions.js

export function addToCart(product, quantity) {
  return dispatch => {
    dispatch({
      type: "ADD_TO_CART_LOAD"
    });
    new _rest()
      .post(URLConstants.urls.ADD_TO_CART, {
        optionVariationId: null,
        productId: product.productId,
        quantity: quantity
      })
      .then(response => {
        dispatch({
          type: "ADD_TO_CART_SUCCESS",
          payload: response.data
        });
      })
      .catch(error => {
        return dispatch({
          type: "ADD_TO_CART_ERROR",
          payload: error
        });
      });
  };
}

addToCartReducer.js

const initialState = {
  loading: false,
  loaded: false,
  error: null,
  itemsInCart: null,
  pagination: null,
  totalamount: 0,
  checkedItems: [],
  paymentStatus: "NIL_TRANSACTION",
  order: {
    addressId: "NIL",
    paymentType: "NIL"
  },
  bulkOrderData: []
};

export default function (state = initialState, action) {
  switch (action.type) {
    case "ADD_TO_CART_LOAD":
      return {
        ...state,
        loading: true
      };

    case "ADD_TO_CART_SUCCESS":
      return {
        ...state,
        loading: false,
        loaded: true,
        addedToCart: action.payload
      };

    case "ADD_TO_CART_ERROR":
      return {
        ...state,
        loading: false,
        error: action.error
      };