woocommerce/woocommerce-paypal-payments
2
0
Fork 0
mirror of https://github.com/woocommerce/woocommerce-paypal-payments.git synced 2025-09-06 18:16:38 +08:00
Code Issues Projects Packages Wiki Activity Actions

♻️ Refactor Styles store

Browse source
This commit is contained in:
Philipp Stracker 2025-02-05 18:51:41 +01:00
parent de24a30fac
commit d84ab9f5ea
No known key found for this signature in database
5 changed files with 43 additions and 61 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -6,13 +6,10 @@
export default { export default {
// Transient data. // Transient data.
SET_TRANSIENT: 'STYLE:SET_TRANSIENT', SET_TRANSIENT: 'ppcp/style/SET_TRANSIENT',
// Persistent data. // 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',
}; };

26
modules/ppcp-settings/resources/js/data/styling/actions.js
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 = ( state ) => setTransient( 'isReady', state ); 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 );
}
};
}

23
modules/ppcp-settings/resources/js/data/styling/controls.js vendored
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,
} );
},
};

5
modules/ppcp-settings/resources/js/data/styling/index.js
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,

39
modules/ppcp-settings/resources/js/data/styling/resolvers.js
View file

@ -8,29 +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
__( .dispatch( 'core/notices' )
'Error retrieving style-details.', .createErrorNotice(
'woocommerce-paypal-payments' __(
) 'Error retrieving Styling details.',
); 'woocommerce-paypal-payments'
)
);
} }
}, };
}; }