Fix payment store performance by getting a focused selector (https://github.com/woocommerce/woocommerce-blocks/pull/7811)
* Fix payment store performance by getting a focused selector * Replace getState selector with focused selectors in saved payment methods options
This commit is contained in:
parent
a7f3e22453
commit
47aa2ae27b
|
@ -3,7 +3,7 @@
|
|||
*/
|
||||
import { __ } from '@wordpress/i18n';
|
||||
import Label from '@woocommerce/base-components/label';
|
||||
import { select } from '@wordpress/data';
|
||||
import { useSelect } from '@wordpress/data';
|
||||
import { PAYMENT_STORE_KEY } from '@woocommerce/block-data';
|
||||
|
||||
/**
|
||||
|
@ -23,7 +23,14 @@ const PaymentMethods = () => {
|
|||
paymentMethodsInitialized,
|
||||
availablePaymentMethods,
|
||||
savedPaymentMethods,
|
||||
} = select( PAYMENT_STORE_KEY ).getState();
|
||||
} = useSelect( ( select ) => {
|
||||
const store = select( PAYMENT_STORE_KEY );
|
||||
return {
|
||||
paymentMethodsInitialized: store.paymentMethodsInitialized(),
|
||||
availablePaymentMethods: store.getAvailablePaymentMethods(),
|
||||
savedPaymentMethods: store.getSavedPaymentMethods(),
|
||||
};
|
||||
} );
|
||||
|
||||
if (
|
||||
paymentMethodsInitialized &&
|
||||
|
|
|
@ -64,7 +64,14 @@ const getDefaultLabel = ( { method } ) => {
|
|||
|
||||
const SavedPaymentMethodOptions = () => {
|
||||
const { activeSavedToken, activePaymentMethod, savedPaymentMethods } =
|
||||
useSelect( ( select ) => select( PAYMENT_STORE_KEY ).getState() );
|
||||
useSelect( ( select ) => {
|
||||
const store = select( PAYMENT_STORE_KEY );
|
||||
return {
|
||||
activeSavedToken: store.getActiveSavedToken(),
|
||||
activePaymentMethod: store.getActivePaymentMethod(),
|
||||
savedPaymentMethods: store.getSavedPaymentMethods(),
|
||||
};
|
||||
} );
|
||||
const { __internalSetActivePaymentMethod } =
|
||||
useDispatch( PAYMENT_STORE_KEY );
|
||||
const paymentMethods = getPaymentMethods();
|
||||
|
|
|
@ -126,6 +126,9 @@ export const getPaymentResult = ( state: PaymentState ) => {
|
|||
return state.paymentResult;
|
||||
};
|
||||
|
||||
// We should avoid using this selector and instead use the focused selectors
|
||||
// We're keeping it because it's used in our unit test: assets/js/blocks/cart-checkout-shared/payment-methods/test/payment-methods.js
|
||||
// to mock the selectors.
|
||||
export const getState = ( state: PaymentState ) => {
|
||||
return state;
|
||||
};
|
||||
|
|
Loading…
Reference in New Issue