♻️ Improve the Redux hook

This commit is contained in:
Philipp Stracker 2025-02-10 19:10:04 +01:00
parent 988d221a98
commit 6e7a6496e5
No known key found for this signature in database

View file

@ -8,7 +8,7 @@
*/
import { useDispatch, useSelect } from '@wordpress/data';
import { useCallback, useEffect, useState } from '@wordpress/element';
import { useCallback, useEffect, useMemo, useState } from '@wordpress/element';
import { createHooksForStore } from '../utils';
import { STORE_NAME } from './constants';
@ -36,10 +36,6 @@ const useHooks = () => {
const [ isManualConnectionMode, setManualConnectionMode ] = usePersistent(
'useManualConnection'
);
const merchant = useSelect(
( select ) => select( STORE_NAME ).merchant(),
[]
);
// Read-only properties.
const wooSettings = useSelect(
@ -78,7 +74,6 @@ const useHooks = () => {
productionOnboardingUrl,
authenticateWithCredentials,
authenticateWithOAuth,
merchant,
wooSettings,
features,
webhooks,
@ -169,18 +164,25 @@ export const useMerchantInfo = () => {
// Read-only access to the sanitized merchant details.
export const useMerchant = () => {
const { merchant } = useHooks();
const merchant = useSelect(
( select ) => select( STORE_NAME ).merchant(),
[]
);
return {
isConnected: merchant.isConnected ?? false,
isSandbox: merchant.isSandbox ?? true,
id: merchant.id ?? '',
email: merchant.email ?? '',
clientId: merchant.clientId ?? '',
clientSecret: merchant.clientSecret ?? '',
isBusinessSeller: 'business' === merchant.sellerType,
isCasualSeller: 'personal' === merchant.sellerType,
};
return useMemo(
() => ( {
isConnected: merchant.isConnected ?? false,
isSandbox: merchant.isSandbox ?? true,
id: merchant.id ?? '',
email: merchant.email ?? '',
clientId: merchant.clientId ?? '',
clientSecret: merchant.clientSecret ?? '',
isBusinessSeller: 'business' === merchant.sellerType,
isCasualSeller: 'personal' === merchant.sellerType,
} ),
// the merchant object is stable, so a new memo is only generated when a merchant prop changes.
[ merchant ]
);
};
export const useActiveModal = () => {