♻️ Refactor Styles store

modules/ppcp-settings/resources/js/data/styling/action-types.js

@@ -6,13 +6,10 @@
 
 export default {
 	// Transient data.
-	SET_TRANSIENT: 'STYLE:SET_TRANSIENT',
+	SET_TRANSIENT: 'ppcp/style/SET_TRANSIENT',
 
 	// Persistent data.
-	SET_PERSISTENT: 'STYLE:SET_PERSISTENT',
+	SET_PERSISTENT: 'ppcp/style/SET_PERSISTENT',
-	RESET: 'STYLE:RESET',
+	RESET: 'ppcp/style/RESET',
-	HYDRATE: 'STYLE:HYDRATE',
+	HYDRATE: 'ppcp/style/HYDRATE',
-
-	// Controls - always start with "DO_".
-	DO_PERSIST_DATA: 'STYLE:DO_PERSIST_DATA',
 };

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

@@ -7,10 +7,10 @@
  * @file
  */
 
-import { select } from '@wordpress/data';
+import apiFetch from '@wordpress/api-fetch';
 
 import ACTION_TYPES from './action-types';
-import { STORE_NAME } from './constants';
+import { REST_PERSIST_PATH } from './constants';
 
 /**
  * @typedef {Object} Action An action object that is handled by a reducer or control.
@@ -69,12 +69,22 @@ export const setPersistent = ( prop, value ) => ( {
 export const setIsReady = ( state ) => setTransient( 'isReady', state );
 
 /**
- * Side effect. Triggers the persistence of store data to the server.
+ * Thunk action creator. Triggers the persistence of store data to the server.
  *
- * @return {Action} The action.
+ * @return {Function} The thunk function.
  */
-export const persist = function* () {
+export function persist() {
-	const data = yield select( STORE_NAME ).persistentData();
+	return async ( { select } ) => {
+		const data = select.persistentData();
 
-	yield { type: ACTION_TYPES.DO_PERSIST_DATA, data };
+		try {
+			await apiFetch( {
+				path: REST_PERSIST_PATH,
+				method: 'POST',
+				data,
+			} );
+		} catch ( e ) {
+			console.error( 'Error saving progress.', e );
+		}
 	};
+}

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

@@ -1,23 +0,0 @@
-/**
- * Controls: Implement side effects, typically asynchronous operations.
- *
- * Controls use ACTION_TYPES keys as identifiers.
- * They are triggered by corresponding actions and handle external interactions.
- *
- * @file
- */
-
-import apiFetch from '@wordpress/api-fetch';
-
-import { REST_PERSIST_PATH } from './constants';
-import ACTION_TYPES from './action-types';
-
-export const controls = {
-	async [ ACTION_TYPES.DO_PERSIST_DATA ]( { data } ) {
-		return await apiFetch( {
-			path: REST_PERSIST_PATH,
-			method: 'POST',
-			data,
-		} );
-	},
-};

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

@@ -1,13 +1,11 @@
 import { createReduxStore, register } from '@wordpress/data';
-import { controls as wpControls } from '@wordpress/data-controls';
 
 import { STORE_NAME } from './constants';
 import reducer from './reducer';
 import * as selectors from './selectors';
 import * as actions from './actions';
 import * as hooks from './hooks';
-import { resolvers } from './resolvers';
+import * as resolvers from './resolvers';
-import { controls } from './controls';
 
 /**
  * Initializes and registers the settings store with WordPress data layer.
@@ -18,7 +16,6 @@ import { controls } from './controls';
 export const initStore = () => {
 	const store = createReduxStore( STORE_NAME, {
 		reducer,
-		controls: { ...wpControls, ...controls },
 		actions,
 		selectors,
 		resolvers,

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

@@ -8,29 +8,30 @@
  * @file
  */
 
-import { dispatch } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
-import { apiFetch } from '@wordpress/data-controls';
+import apiFetch from '@wordpress/api-fetch';
 
-import { STORE_NAME, REST_HYDRATE_PATH } from './constants';
+import { REST_HYDRATE_PATH } from './constants';
 
-export const resolvers = {
 /**
  * Retrieve settings from the site's REST API.
  */
-	*persistentData() {
+export function persistentData() {
+	return async ( { dispatch, registry } ) => {
 		try {
-			const result = yield apiFetch( { path: REST_HYDRATE_PATH } );
+			const result = await apiFetch( { path: REST_HYDRATE_PATH } );
 
-			yield dispatch( STORE_NAME ).hydrate( result );
+			await dispatch.hydrate( result );
-			yield dispatch( STORE_NAME ).setIsReady( true );
+			await dispatch.setIsReady( true );
 		} catch ( e ) {
-			yield dispatch( 'core/notices' ).createErrorNotice(
+			await registry
+				.dispatch( 'core/notices' )
+				.createErrorNotice(
 					__(
-					'Error retrieving style-details.',
+						'Error retrieving Styling details.',
 						'woocommerce-paypal-payments'
 					)
 				);
 		}
-	},
 	};
+}