✨ Add gemeric hook-generator for data access

modules/ppcp-settings/resources/js/data/styling/hooks.js

@@ -11,6 +11,7 @@ import { __ } from '@wordpress/i18n';
 import { useCallback, useState } from '@wordpress/element'; // Temporary
 import { useSelect, useDispatch } from '@wordpress/data';
 
+import { createHooksForStore } from '../utils';
 import { STORE_NAME } from './constants';
 import {
 	STYLING_COLORS,
@@ -21,28 +22,17 @@ import {
 	STYLING_SHAPES,
 } from './configuration';
 
-const useTransient = ( key ) =>
-	useSelect(
-		( select ) => select( STORE_NAME ).transientData()?.[ key ],
-		[ key ]
-	);
-
-const usePersistent = ( key ) =>
-	useSelect(
-		( select ) => select( STORE_NAME ).persistentData()?.[ key ],
-		[ key ]
-	);
-
 const useHooks = () => {
-	const { persist, setShape } = useDispatch( STORE_NAME );
+	const { useTransient, usePersistent } = createHooksForStore( STORE_NAME );
+	const { persist } = useDispatch( STORE_NAME );
 
 	// Read-only flags and derived state.
 
 	// Transient accessors.
-	const isReady = useTransient( 'isReady' );
+	const [ isReady ] = useTransient( 'isReady' );
 
 	// Persistent accessors.
-	const shape = usePersistent( 'shape' );
+	const [ shape, setShape ] = usePersistent( 'shape' );
 
 	return {
 		persist,

modules/ppcp-settings/resources/js/data/utils.js

@@ -1,3 +1,6 @@
+import { useDispatch, useSelect } from '@wordpress/data';
+import { useCallback } from '@wordpress/element';
+
 /**
  * Updates an object with new values, filtering based on allowed keys.
  *
@@ -13,6 +16,10 @@ const updateObject = ( oldObject, newValues, allowedKeys = {} ) => ( {
 	...Object.keys( newValues ).reduce( ( acc, key ) => {
 		if ( key in allowedKeys ) {
 			acc[ key ] = newValues[ key ];
+		} else {
+			console.warn(
+				`Ignoring unknown key "${ key }" - to use it, add it to the initial store properties in the reducer.`
+			);
 		}
 		return acc;
 	}, {} ),
@@ -73,3 +80,57 @@ export const createReducer = (
 		return state;
 	};
 };
+
+/**
+ * Returns an object with two hooks:
+ * - useTransient( prop )
+ * - usePersistent( prop )
+ *
+ * Both hooks have a similar syntax to the native "useState( prop )" hook, but provide access to
+ * a transient or persistent property in the relevant Redux store.
+ *
+ * Sample:
+ *
+ * const { useTransient } = createHooksForStore( STORE_NAME );
+ * const [ isReady, setIsReady ] = useTransient( 'isReady' );
+ *
+ * @param {string} storeName Store name.
+ * @return {{useTransient, usePersistent}} Store hooks.
+ */
+export const createHooksForStore = ( storeName ) => {
+	const createHook = ( selector, dispatcher ) => ( key ) => {
+		const value = useSelect(
+			( select ) => {
+				const store = select( storeName );
+				if ( ! store?.[ selector ] ) {
+					throw new Error(
+						`Please create the selector "${ selector }" for store "${ storeName }"`
+					);
+				}
+				return store[ selector ]()?.[ key ];
+			},
+			[ key ]
+		);
+
+		const actions = useDispatch( storeName );
+
+		const setValue = useCallback(
+			( newValue ) => {
+				if ( ! actions?.[ dispatcher ] ) {
+					throw new Error(
+						`Please create the action "${ dispatcher }" for store "${ storeName }"`
+					);
+				}
+				actions[ dispatcher ]( key, newValue );
+			},
+			[ actions, key ]
+		);
+
+		return [ value, setValue ];
+	};
+
+	return {
+		useTransient: createHook( 'transientData', 'setTransient' ),
+		usePersistent: createHook( 'persistentData', 'setPersistent' ),
+	};
+};