Listening To Redux State Via MapStateProps Not Updating State

Question

I am building a cart with react & redux, in my products page i implement add/update to cart actions,

  //check side effects in the cart and save to cart state redux
  useEffect(() => {
    if (cart.totalQuantity > 1 && saveToCart) {
      console.log("updating");
      updateCart(cart);
      setSaveToCart(false);
    } else if (saveToCart && cart.totalQuantity === 0) {
      console.log("adding");
      addToCart(cart);
      setSaveToCart(false);
    }
  }, [cart]);

on the same page this are my actions

const mapDispatchToProps = {
  addToCart,
  updateCart,
};

In the cart page i listen to the cart state via:

function mapStateToProps(state: any) {
  return {
    reduxCart: state.cart,
  };
}

export default connect(mapStateToProps, null)(Cart);

I expect my reduxCart State in my cart page to update whenever i add/update cart in the products page.

However despite changes happening on the redux state after i dispatch addCart/updateCart, the reduxCart in the cart page doesn't get updated , however when i refresh the page i get the current state. Isn't mapStateToProps supposed to update the reduxCart value when i dispatch actions in the product page?

This is my reducer:

import * as types from "../actions/actionTypes";
import intitialState from "../intitialState";

export default function cartReducer(state = intitialState.cart, action: any) {
  switch (action.type) {
    case types.CREATE_CART_SUCCESS:
      // return [];
      return [...state, { ...action.cart }];
    case types.UPDATE_CART_SUCCESS:
      // return [];
      return state.map((cart: any) =>
        cart.itemCode == action.cart.itemCode ? action.cart : cart
      );
    case types.GET_CART_SUCCESS:
      return state;
    case types.DELETE_CART_OPTIMISTIC:
      return state.filter(
        (cart: any) => cart.itemCode !== action.cart.itemCode
      );
    default:
      return state;
  }
}

My actions? Here is my action:

import * as types from "./actionTypes";
import { Dispatch } from "redux";

//dispatches

export function createCartSuccess(cart: any) {
  return { type: types.CREATE_CART_SUCCESS, cart: cart };
}

export function updateCartSuccess(cart: any) {
  return { type: types.UPDATE_CART_SUCCESS, cart: cart };
}
export function deleteCartOptimistic(cart: any) {
  return { type: types.DELETE_CART_OPTIMISTIC, cart: cart };
}
export function resetCart() {
  return { type: types.RESET_CART_SUCCESS, cart: [] };
}

//Add to Cart
export function addToCart(cartItem: any) {
  return function (dispatch: Dispatch) {
    dispatch(createCartSuccess(cartItem));
  };
}

//Update Cart
export function updateCart(cartItem: any) {
  return function (dispatch: Dispatch) {
    dispatch(updateCartSuccess(cartItem));
  };
}
//Delete Cart
export function deleteCart(cartItem: any) {
  return function (dispatch: Dispatch) {
    dispatch(deleteCartOptimistic(cartItem));
  };
}
//Empty Cart
export function emptyCart() {
  return function (dispatch: Dispatch) {
    dispatch(resetCart());
  };
}

My Cart Reducer

import * as types from "../actions/actionTypes";
import intitialState from "../intitialState";

export default function cartReducer(state = intitialState.cart, action: any) {
  switch (action.type) {
    case types.CREATE_CART_SUCCESS:
      // return [];
      return [...state, { ...action.cart }];
    case types.UPDATE_CART_SUCCESS:
      // return [];
      return state.map((cart: any) =>
        cart.itemCode == action.cart.itemCode ? action.cart : cart
      );
    case types.GET_CART_SUCCESS:
      return state;
    case types.DELETE_CART_OPTIMISTIC:
      return state.filter(
        (cart: any) => cart.itemCode !== action.cart.itemCode
      );
    default:
      return state;
  }
}

And my Combine Reducer:

import { combineReducers } from "redux";
import cart from "./cartReducer";
import discounts from "./discountReducer";
import categories from "./categoryReducer";

const rootReducer = combineReducers({
  cart,
  discounts,
  categories,
});

export default rootReducer;

My store configuration:

import { createStore, applyMiddleware } from "redux";
import thunk from "redux-thunk";
import { composeWithDevTools } from "redux-devtools-extension";
import { persistReducer } from "redux-persist";
import rootReducer from "./reducers";
import storage from "redux-persist/lib/storage";
import intitialState from "./intitialState";

const persistConfig = {
  key: "root",
  storage,
};
const persistedReducer = persistReducer(persistConfig, rootReducer);

export default function configureStore() {
  const middleware = [thunk];
  return createStore(
    persistedReducer,
    intitialState,
    composeWithDevTools(applyMiddleware(...middleware))
  );
}

someone kindly explain this?