♻️ Refactor Pay Later Messaging store

This commit is contained in:
Philipp Stracker 2025-02-05 18:55:15 +01:00
parent fc2b14f720
commit b6a803d6ad
No known key found for this signature in database
5 changed files with 44 additions and 60 deletions

View file

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

View file

@ -7,10 +7,10 @@
* @file * @file
*/ */
import { select } from '@wordpress/data'; import apiFetch from '@wordpress/api-fetch';
import ACTION_TYPES from './action-types'; 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. * @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 = ( isReady ) => setTransient( 'isReady', isReady ); export const setIsReady = ( isReady ) => setTransient( 'isReady', isReady );
/** /**
* 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 );
}
};
}

View file

@ -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,
} );
},
};

View file

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

View file

@ -8,30 +8,30 @@
* @file * @file
*/ */
import { dispatch } from '@wordpress/data';
import { __ } from '@wordpress/i18n'; 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.
* Retrieve settings from the site's REST API. */
*/ export function persistentData() {
*persistentData() { return async ( { dispatch, registry } ) => {
try { 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 ) { } catch ( e ) {
yield dispatch( 'core/notices' ).createErrorNotice( await registry
// TODO: Add the module name to the error message. .dispatch( 'core/notices' )
__( .createErrorNotice(
'Error retrieving Pay Later Messaging config details.', __(
'woocommerce-paypal-payments' 'Error retrieving Pay Later Messaging details.',
) 'woocommerce-paypal-payments'
); )
);
} }
}, };
}; }