✨ Brand new, empty “Styling” store in Redux

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

@@ -0,0 +1,48 @@
+/**
+ * Hooks: Provide the main API for components to interact with the store.
+ *
+ * These encapsulate store interactions, offering a consistent interface.
+ * Hooks simplify data access and manipulation for components.
+ *
+ * @file
+ */
+
+import { useSelect, useDispatch } from '@wordpress/data';
+
+import { STORE_NAME } from './constants';
+
+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 );
+
+	// Read-only flags and derived state.
+
+	// Transient accessors.
+	const isReady = useTransient( 'isReady' );
+
+	// Persistent accessors.
+	const shape = usePersistent( 'shape' );
+
+	return {
+		persist,
+		isReady,
+		shape,
+		setShape,
+	};
+};
+
+export const useState = () => {
+	const { persist, isReady } = useHooks();
+	return { persist, isReady };
+};