♻️ Settings store: Refactor to use thunks

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

@@ -31,10 +31,4 @@ export default {
 	 * to set up the initial state with data from the server.
 	 */
 	HYDRATE: 'ppcp/settings/HYDRATE',
-
-	/**
-	 * Triggers the persistence of store data to the server.
-	 * Used when changes need to be saved to the backend.
-	 */
-	DO_PERSIST_DATA: 'ppcp/settings/DO_PERSIST_DATA',
 };

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

@@ -7,9 +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.
@@ -70,12 +71,22 @@ export const setPersistent = ( prop, value ) => ( {
 export const setIsReady = ( isReady ) => setTransient( 'isReady', isReady );
 
 /**
- * Side effect. Triggers the persistence of store data to the server.
- * Yields an action with the current persistent data to be saved.
+ * 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* () {
-	const data = yield select( STORE_NAME ).persistentData();
-	yield { type: ACTION_TYPES.DO_PERSIST_DATA, data };
-};
+export function persist() {
+	return async ( { select } ) => {
+		const data = select.persistentData();
+
+		try {
+			await apiFetch( {
+				path: REST_PERSIST_PATH,
+				method: 'POST',
+				data,
+			} );
+		} catch ( e ) {
+			console.error( 'Error saving progress.', e );
+		}
+	};
+}

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

@@ -1,34 +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';
-
-/**
- * Control handlers for settings store actions.
- * Each handler maps to an ACTION_TYPE and performs the corresponding async operation.
- */
-export const controls = {
-	/**
-	 * Persists settings data to the server via REST API.
-	 * Triggered by the DO_PERSIST_DATA action to save settings changes.
-	 *
-	 * @param {Object} action      The action object
-	 * @param {Object} action.data The settings data to persist
-	 * @return {Promise<Object>} The API response
-	 */
-	async [ ACTION_TYPES.DO_PERSIST_DATA ]( { data } ) {
-		return await apiFetch( {
-			path: REST_PERSIST_PATH,
-			method: 'POST',
-			data,
-		} );
-	},
-};

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

@@ -8,15 +8,13 @@
  */
 
 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 { controls } from './controls';
+import * as resolvers from './resolvers';
 
 /**
  * Initializes and registers the settings store with WordPress data layer.
@@ -27,7 +25,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/settings/resolvers.js

@@ -8,50 +8,31 @@
  * @file
  */
 
-import { dispatch } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
-import { apiFetch } from '@wordpress/data-controls';
-import { STORE_NAME, REST_HYDRATE_PATH } from './constants';
+import apiFetch from '@wordpress/api-fetch';
 
-export const resolvers = {
-	/**
-	 * Retrieve PayPal settings from the site's REST API.
-	 * Hydrates the store with the retrieved data and marks it as ready.
-	 *
-	 * @generator
-	 * @yield {Object} API fetch and dispatch actions
-	 */
-	*persistentData() {
+import { REST_HYDRATE_PATH } from './constants';
+
+/**
+ * Retrieve settings from the site's REST API.
+ */
+export function persistentData() {
+	return async ( { dispatch, registry } ) => {
 		try {
-			// Fetch settings data from REST API
-			const result = yield apiFetch( {
-				path: REST_HYDRATE_PATH,
-				method: 'GET',
-				headers: {
-					'Content-Type': 'application/json',
-					Accept: 'application/json',
-				},
-			} );
+			const result = await apiFetch( { path: REST_HYDRATE_PATH } );
 
-			// Update store with retrieved data
-			yield dispatch( STORE_NAME ).hydrate( result );
-			// Mark store as ready for use
-			yield dispatch( STORE_NAME ).setIsReady( true );
+			await dispatch.hydrate( result );
+			await dispatch.setIsReady( true );
 		} catch ( e ) {
-			// Log detailed error information for debugging
-			console.error( 'Full error details:', {
-				error: e,
-				path: REST_HYDRATE_PATH,
-				store: STORE_NAME,
-			} );
-
-			// Display user-friendly error notice
-			yield dispatch( 'core/notices' ).createErrorNotice(
-				__(
-					'Error retrieving PayPal settings details.',
-					'woocommerce-paypal-payments'
-				)
-			);
+			// TODO: Add the module name to the error message.
+			await registry
+				.dispatch( 'core/notices' )
+				.createErrorNotice(
+					__(
+						'Error retrieving PayPal Settings details.',
+						'woocommerce-paypal-payments'
+					)
+				);
 		}
-	},
-};
+	};
+}