♻️ Apply new hook-pattern to payment store

This commit is contained in:
Philipp Stracker 2025-02-14 17:45:05 +01:00
parent 5afdc815ef
commit 838fd6a1a0
No known key found for this signature in database

View file

@ -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 = () => {