feat(core): CHECKOUT-9513 Pass initial state through separate method to reduce work in single microtask

Author: davidchin

packages/core/src/billing/billing-address-reducer.ts

@@ -43,7 +43,7 @@ function dataReducer(
             return replace(data, action.payload && action.payload.billingAddress);
 
         case CheckoutHydrateActionType.HydrateInitialState:
-            return replace(data, action.payload?.checkout.billingAddress);
+            return replace(data, action.payload?.checkout?.billingAddress);
 
         default:
             return data;

packages/core/src/cart/cart-reducer.ts

@@ -55,7 +55,7 @@ function dataReducer(
             return objectMerge(data, action.payload && action.payload.cart);
 
         case CheckoutHydrateActionType.HydrateInitialState:
-            return objectMerge(data, action.payload?.checkout.cart);
+            return objectMerge(data, action.payload?.checkout?.cart);
 
         default:
             return data;

packages/core/src/checkout/checkout-action-creator.ts

@@ -1,4 +1,4 @@
-import { createAction, createErrorAction, ThunkAction } from '@bigcommerce/data-store';
+import { Action, createAction, createErrorAction, ThunkAction } from '@bigcommerce/data-store';
 import { concat, defer, merge, Observable, of } from 'rxjs';
 import { catchError } from 'rxjs/operators';
 
@@ -10,6 +10,8 @@ import { FormFieldsActionCreator } from '../form';
 
 import Checkout, { CheckoutRequestBody } from './checkout';
 import { CheckoutActionType, LoadCheckoutAction, UpdateCheckoutAction } from './checkout-actions';
+import { CheckoutHydrateActionType } from './checkout-hydrate-actions';
+import CheckoutInitialState from './checkout-initial-state';
 import CheckoutRequestSender from './checkout-request-sender';
 import InternalCheckoutSelectors from './internal-checkout-selectors';
 
@@ -143,6 +145,13 @@ export default class CheckoutActionCreator {
         };
     }
 
+    hydrateInitialState(state: CheckoutInitialState): Action<CheckoutInitialState> {
+        return {
+            type: CheckoutHydrateActionType.HydrateInitialState,
+            payload: state,
+        };
+    }
+
     private _transformCustomerAddresses(body: Checkout): Checkout {
         return {
             ...body,

packages/core/src/checkout/checkout-initial-state.ts

@@ -5,8 +5,8 @@ import { FormFields } from '../form';
 import Checkout from './checkout';
 
 export default interface CheckoutInitialState {
-    config: Config;
-    formFields: FormFields;
-    checkout: Checkout;
-    extensions: Extension[];
+    config?: Config;
+    formFields?: FormFields;
+    checkout?: Checkout;
+    extensions?: Extension[];
 }

packages/core/src/checkout/checkout-reducer.ts

@@ -16,13 +16,13 @@ import { SpamProtectionAction, SpamProtectionActionType } from '../spam-protecti
 import { StoreCreditAction, StoreCreditActionType } from '../store-credit';
 
 import { CheckoutAction, CheckoutActionType } from './checkout-actions';
+import { CheckoutHydrateAction, CheckoutHydrateActionType } from './checkout-hydrate-actions';
 import CheckoutState, {
     CheckoutDataState,
     CheckoutErrorsState,
     CheckoutStatusesState,
     DEFAULT_STATE,
 } from './checkout-state';
-import { CheckoutHydrateAction, CheckoutHydrateActionType } from './checkout-hydrate-actions';
 
 export default function checkoutReducer(
     state: CheckoutState = DEFAULT_STATE,

packages/core/src/checkout/checkout-service.spec.ts

@@ -108,6 +108,7 @@ import { StoreCreditActionCreator, StoreCreditRequestSender } from '../store-cre
 import { SubscriptionsActionCreator, SubscriptionsRequestSender } from '../subscription';
 
 import CheckoutActionCreator from './checkout-action-creator';
+import CheckoutInitialState from './checkout-initial-state';
 import CheckoutRequestSender from './checkout-request-sender';
 import CheckoutSelectors from './checkout-selectors';
 import CheckoutService from './checkout-service';
@@ -1630,4 +1631,24 @@ describe('CheckoutService', () => {
             );
         });
     });
+
+    describe('#hydrateInitialState', () => {
+        it('creates instance with initial data', async () => {
+            const initialState: CheckoutInitialState = {
+                config: getConfig(),
+                formFields: getFormFields(),
+                checkout: getCheckout(),
+                extensions: getExtensions(),
+            };
+
+            const state = await checkoutService.hydrateInitialState(initialState);
+
+            expect(state.data.getCheckout()).toEqual(initialState.checkout);
+            expect(state.data.getConfig()).toEqual(initialState.config?.storeConfig);
+            expect(state.data.getCustomerAccountFields()).toEqual(
+                initialState.formFields?.customerAccount,
+            );
+            expect(state.data.getExtensions()).toEqual(initialState.extensions);
+        });
+    });
 });

packages/core/src/checkout/checkout-service.ts

@@ -60,6 +60,7 @@ import { Subscriptions, SubscriptionsActionCreator } from '../subscription';
 
 import { CheckoutRequestBody } from './checkout';
 import CheckoutActionCreator from './checkout-action-creator';
+import CheckoutInitialState from './checkout-initial-state';
 import CheckoutParams from './checkout-params';
 import CheckoutSelectors from './checkout-selectors';
 import CheckoutStore from './checkout-store';
@@ -180,6 +181,29 @@ export default class CheckoutService {
         return this._storeProjection.subscribe(subscriber, ...filters);
     }
 
+    /**
+     * Hydrates the checkout service with an initial state.
+     *
+     * The initial state can contain various checkout data such as cart items,
+     * customer information, and other relevant state.
+     *
+     * ```js
+     * const initialState = {
+     *     // ... initial checkout state data
+     * };
+     *
+     * const state = await service.hydrateInitialState(initialState);
+     *
+     * console.log(state.data.getCheckout());
+     * ```
+     *
+     * @param state - The initial state data to hydrate the checkout service with.
+     * @returns A promise that resolves to the current state after hydration.
+     */
+    hydrateInitialState(state: CheckoutInitialState): Promise<CheckoutSelectors> {
+        return this._dispatch(this._checkoutActionCreator.hydrateInitialState(state));
+    }
+
     /**
      * Loads the current checkout.
      *

packages/core/src/checkout/create-checkout-service.spec.ts

@@ -1,13 +1,8 @@
 import { createRequestSender } from '@bigcommerce/request-sender';
 
 import { getDefaultLogger, Logger } from '../common/log';
-import { getConfig } from '../config/configs.mock';
-import { getExtensions } from '../extension/extension.mock';
-import { getFormFields } from '../form/form.mock';
 
-import CheckoutInitialState from './checkout-initial-state';
 import CheckoutService from './checkout-service';
-import { getCheckout } from './checkouts.mock';
 import createCheckoutService from './create-checkout-service';
 
 jest.mock('@bigcommerce/request-sender');
@@ -48,23 +43,4 @@ describe('createCheckoutService()', () => {
 
         expect(logger.warn).toHaveBeenCalled();
     });
-
-    it('creates instance with initial data', () => {
-        const initialState: CheckoutInitialState = {
-            config: getConfig(),
-            formFields: getFormFields(),
-            checkout: getCheckout(),
-            extensions: getExtensions(),
-        };
-        const checkoutService = createCheckoutService({ initialState });
-        const state = checkoutService.getState();
-
-        expect(checkoutService).toBeInstanceOf(CheckoutService);
-        expect(state.data.getCheckout()).toEqual(initialState.checkout);
-        expect(state.data.getConfig()).toEqual(initialState.config.storeConfig);
-        expect(state.data.getCustomerAccountFields()).toEqual(
-            initialState.formFields.customerAccount,
-        );
-        expect(state.data.getExtensions()).toEqual(initialState.extensions);
-    });
 });

packages/core/src/checkout/create-checkout-service.ts

@@ -61,7 +61,6 @@ import { StoreCreditActionCreator, StoreCreditRequestSender } from '../store-cre
 import { SubscriptionsActionCreator, SubscriptionsRequestSender } from '../subscription';
 
 import CheckoutActionCreator from './checkout-action-creator';
-import CheckoutInitialState from './checkout-initial-state';
 import CheckoutRequestSender from './checkout-request-sender';
 import CheckoutService from './checkout-service';
 import CheckoutValidator from './checkout-validator';
@@ -110,7 +109,7 @@ export default function createCheckoutService(options?: CheckoutServiceOptions):
     };
     const { locale = '', shouldWarnMutation = true } = options || {};
     const requestSender = createRequestSender({ host: options && options.host });
-    const store = createCheckoutStore({ config }, options?.initialState, { shouldWarnMutation });
+    const store = createCheckoutStore({ config }, { shouldWarnMutation });
     const paymentClient = createPaymentClient(store);
     const orderRequestSender = new OrderRequestSender(requestSender);
     const checkoutRequestSender = new CheckoutRequestSender(requestSender);
@@ -214,5 +213,4 @@ export interface CheckoutServiceOptions {
     host?: string;
     shouldWarnMutation?: boolean;
     externalSource?: string;
-    initialState?: CheckoutInitialState;
 }

packages/core/src/checkout/create-checkout-store.ts

@@ -2,8 +2,6 @@ import { createDataStore } from '@bigcommerce/data-store';
 
 import { createRequestErrorFactory } from '../common/error';
 
-import { CheckoutHydrateActionType } from './checkout-hydrate-actions';
-import CheckoutInitialState from './checkout-initial-state';
 import CheckoutStore, { CheckoutStoreOptions } from './checkout-store';
 import CheckoutStoreState from './checkout-store-state';
 import createActionTransformer from './create-action-transformer';
@@ -12,25 +10,16 @@ import { createInternalCheckoutSelectorsFactory } from './create-internal-checko
 
 export default function createCheckoutStore(
     initialStoreState: Partial<CheckoutStoreState> = {},
-    initialServerState?: CheckoutInitialState,
     options?: CheckoutStoreOptions,
 ): CheckoutStore {
     const actionTransformer = createActionTransformer(createRequestErrorFactory());
     const createInternalCheckoutSelectors = createInternalCheckoutSelectorsFactory();
     const stateTransformer = (state: CheckoutStoreState) => createInternalCheckoutSelectors(state);
     const reducer = createCheckoutStoreReducer();
-    const hydrateAction = {
-        type: CheckoutHydrateActionType.HydrateInitialState,
-        payload: initialServerState,
-    };
 
-    return createDataStore(
-        reducer,
-        reducer(initialStoreState as CheckoutStoreState, hydrateAction),
-        {
-            actionTransformer,
-            stateTransformer,
-            ...options,
-        },
-    );
+    return createDataStore(reducer, initialStoreState, {
+        actionTransformer,
+        stateTransformer,
+        ...options,
+    });
 }