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:
Tarun Vijwani 2022-12-07 13:12:55 +04:00 committed by GitHub
parent a7f3e22453
commit 47aa2ae27b
3 changed files with 20 additions and 3 deletions

View File

@ -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 &&

View File

@ -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();

View File

@ -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;
};