Prevent double triggering select shipping on the same rate (https://github.com/woocommerce/woocommerce-blocks/pull/8497)

* Prevent selecting already selected rates

* refactor reducer

* revert changes back to only block dubplicate requests

plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/shipping-rates-control-package/index.tsx

@@ -7,6 +7,7 @@ import { decodeEntities } from '@wordpress/html-entities';
 import type { ReactElement } from 'react';
 import { Panel } from '@woocommerce/blocks-checkout';
 import Label from '@woocommerce/base-components/label';
+import { useCallback } from '@wordpress/element';
 import {
 	useShippingData,
 	useStoreEvents,
@@ -89,17 +90,20 @@ export const ShippingRatesControlPackage = ( {
 			) }
 		</>
 	);
-
-	const packageRatesProps = {
-		className,
-		noResultsMessage,
-		rates: packageData.shipping_rates,
-		onSelectRate: ( newShippingRateId: string ) => {
+	const onSelectRate = useCallback(
+		( newShippingRateId: string ) => {
 			selectShippingRate( newShippingRateId, packageId );
 			dispatchCheckoutEvent( 'set-selected-shipping-rate', {
 				shippingRateId: newShippingRateId,
 			} );
 		},
+		[ dispatchCheckoutEvent, packageId, selectShippingRate ]
+	);
+	const packageRatesProps = {
+		className,
+		noResultsMessage,
+		rates: packageData.shipping_rates,
+		onSelectRate,
 		selectedRate: packageData.shipping_rates.find(
 			( rate ) => rate.selected
 		),

plugins/woocommerce-blocks/assets/js/base/components/radio-control/index.tsx

@@ -3,7 +3,6 @@
  */
 import classnames from 'classnames';
 import { useInstanceId } from '@wordpress/compose';
-
 /**
  * Internal dependencies
  */
@@ -14,7 +13,7 @@ import './style.scss';
 const RadioControl = ( {
 	className = '',
 	id,
-	selected,
+	selected = '',
 	onChange,
 	options = [],
 }: RadioControlProps ): JSX.Element | null => {

plugins/woocommerce-blocks/assets/js/data/cart/actions.ts

@@ -8,6 +8,8 @@ import type {
 	ExtensionCartUpdateArgs,
 	BillingAddressShippingAddress,
 	ApiErrorResponse,
+	CartShippingPackageShippingRate,
+	CartShippingRate,
 } from '@woocommerce/types';
 import { camelCase, mapKeys } from 'lodash';
 import { BillingAddress, ShippingAddress } from '@woocommerce/settings';
@@ -384,7 +386,26 @@ export const changeCartItemQuantity =
  */
 export const selectShippingRate =
 	( rateId: string, packageId = 0 ) =>
-	async ( { dispatch }: { dispatch: CartDispatchFromMap } ) => {
+	async ( {
+		dispatch,
+		select,
+	}: {
+		dispatch: CartDispatchFromMap;
+		select: CartSelectFromMap;
+	} ) => {
+		const selectedShippingRate = select
+			.getShippingRates()
+			.find(
+				( shippingPackage: CartShippingRate ) =>
+					shippingPackage.package_id === packageId
+			)
+			?.shipping_rates.find(
+				( rate: CartShippingPackageShippingRate ) =>
+					rate.selected === true
+			);
+		if ( selectedShippingRate?.rate_id === rateId ) {
+			return;
+		}
 		try {
 			dispatch.shippingRatesBeingSelected( true );
 			const { response } = await apiFetchWithHeaders( {