♻️ Payment method store: Refactor to thunks

This commit is contained in:
Philipp Stracker 2025-02-06 14:25:38 +01:00
parent 657eb9e772
commit 05ad9cfc48
No known key found for this signature in database
5 changed files with 40 additions and 57 deletions

View file

@ -13,7 +13,4 @@ export default {
RESET: 'PAYMENT:RESET',
HYDRATE: 'PAYMENT:HYDRATE',
CHANGE_PAYMENT_SETTING: 'PAYMENT:CHANGE_PAYMENT_SETTING',
// Controls - always start with "DO_".
DO_PERSIST_DATA: 'PAYMENT:DO_PERSIST_DATA',
};

View file

@ -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.
@ -81,12 +81,22 @@ export const changePaymentSettings = ( id, props ) => ( {
} );
/**
* 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* () {
const data = yield select( STORE_NAME ).persistentData();
export function persist() {
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 { 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';
import { initTodoSync } from '../sync/todo-state-sync';
/**
@ -19,7 +17,6 @@ import { initTodoSync } from '../sync/todo-state-sync';
export const initStore = () => {
const store = createReduxStore( STORE_NAME, {
reducer,
controls: { ...wpControls, ...controls },
actions,
selectors,
resolvers,

View file

@ -8,29 +8,31 @@
* @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() {
/**
* Retrieve settings from the site's REST API.
*/
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 );
yield dispatch( STORE_NAME ).setIsReady( true );
await dispatch.hydrate( result );
await dispatch.setIsReady( true );
} catch ( e ) {
yield dispatch( 'core/notices' ).createErrorNotice(
__(
'Error retrieving payment details.',
'woocommerce-paypal-payments'
)
);
// TODO: Add the module name to the error message.
await registry
.dispatch( 'core/notices' )
.createErrorNotice(
__(
'Error retrieving payment details.',
'woocommerce-paypal-payments'
)
);
}
},
};
};
}