diff --git a/modules/ppcp-settings/resources/js/data/payment/hooks.js b/modules/ppcp-settings/resources/js/data/payment/hooks.js index 253710580..7cbd81382 100644 --- a/modules/ppcp-settings/resources/js/data/payment/hooks.js +++ b/modules/ppcp-settings/resources/js/data/payment/hooks.js @@ -7,21 +7,38 @@ * @file */ -import { useDispatch } from '@wordpress/data'; +import { useDispatch, useSelect } from '@wordpress/data'; import { STORE_NAME } from './constants'; import { createHooksForStore } from '../utils'; +import { useMemo } from '@wordpress/element'; + +/** + * Single source of truth for access Redux details. + * + * This hook returns a stable API to access actions, selectors and special hooks to generate + * getter- and setters for transient or persistent properties. + * + * @return {{select, dispatch, useTransient, usePersistent}} Store data API. + */ +const useStoreData = () => { + const select = useSelect( ( selectors ) => selectors( STORE_NAME ), [] ); + const dispatch = useDispatch( STORE_NAME ); + const { useTransient, usePersistent } = createHooksForStore( STORE_NAME ); + + return useMemo( + () => ( { + select, + dispatch, + useTransient, + usePersistent, + } ), + [ select, dispatch, useTransient, usePersistent ] + ); +}; const useHooks = () => { - const { useTransient, usePersistent } = createHooksForStore( STORE_NAME ); - const { persist, setPersistent, changePaymentSettings } = - useDispatch( STORE_NAME ); - - // Read-only flags and derived state. - // Nothing here yet. - - // Transient accessors. - const [ isReady ] = useTransient( 'isReady' ); + const { usePersistent } = useStoreData(); // PayPal checkout. const [ paypal ] = usePersistent( 'ppcp-gateway' ); @@ -58,10 +75,6 @@ const useHooks = () => { ); return { - persist, - isReady, - setPersistent, - changePaymentSettings, paypal, venmo, payLater, @@ -88,9 +101,16 @@ const useHooks = () => { }; export const useStore = () => { - const { persist, isReady, setPersistent, changePaymentSettings } = - useHooks(); - return { persist, isReady, setPersistent, changePaymentSettings }; + const { useTransient, dispatch } = useStoreData(); + const { persist, setPersistent, changePaymentSettings } = dispatch; + const [ isReady ] = useTransient( 'isReady' ); + + return { + persist, + setPersistent, + changePaymentSettings, + isReady, + }; }; export const usePaymentMethods = () => {