♻️ Apply new hook-pattern to payment store

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 { usePersistent } = useStoreData();
-	const { persist, setPersistent, changePaymentSettings } =
-		useDispatch( STORE_NAME );
-
-	// Read-only flags and derived state.
-	// Nothing here yet.
-
-	// Transient accessors.
-	const [ isReady ] = useTransient( 'isReady' );
 
 	// 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 } =
+	const { useTransient, dispatch } = useStoreData();
-		useHooks();
+	const { persist, setPersistent, changePaymentSettings } = dispatch;
-	return { persist, isReady, setPersistent, changePaymentSettings };
+	const [ isReady ] = useTransient( 'isReady' );
+
+	return {
+		persist,
+		setPersistent,
+		changePaymentSettings,
+		isReady,
+	};
 };
 
 export const usePaymentMethods = () => {