WooCommerce Data Store Migration

The most challenging part of the migration involved the PaymentMethodDataProvider, which managed critical payment processing state in the checkout flow. This component controlled sensitive payment data and was integrated with numerous payment gateways via a complex event system.

I carefully refactored this system by:

• Creating a new WordPress Data Store structure for payment data
• Mapping existing context methods to store selectors and actions
• Implementing selector and action functions for accessing and modifying payment state
• Ensuring backward compatibility for existing integrations
• Adding robust TypeScript types for improved code safety

This was particularly delicate work as payment processing is mission-critical for e-commerce sites, and any regressions could directly impact merchants' ability to collect payments.

I identified a major bottleneck: the unavoidable creation of massive PRs with huge file changes, making thorough reviews extremely difficult and risky for this sensitive refactoring.
To make the migration of complex and sensitive state (specifically, the PaymentMethodDataProvider) to a WordPress Data Store reviewable and manageable for code reviewers, I designed and implemented an innovative sequential PR workflow.

Instead of creating a single, massive pull request—which would be difficult and risky to review—I broke the migration into a logical series of dependent, incremental PRs. Each PR focused on a well-defined, self-contained aspect of the migration and kept the application functional and testable at each stage.

For the PaymentMethodDataProvider migration, the steps were:

1. Rebase & Fix Failed Payments (PR #6587):

   Integrated the latest branch changes and refactored status update logic so payment status is consistently read/written from the new WordPress Data Store, replacing legacy context usage for status updates.

2. Set/Get Provider State from Store (PR #6588):

   Updated the provider logic to fully use the data store (instead of useReducer and React context) for all state and dispatch logic, enabling the legacy provider to delegate all state access to the data store.

3. Get Data Directly from Store (PR #6589):

   Removed the indirection via context—updated the remaining code that relied on the provider/context to reference the data store directly, ensuring all state consumers and hooks access data from a single, centralized store.

4. Refactor Store & Context (PR #6607):

   Cleaned up legacy code: removed unused React context, hooks, and files, migrated all relevant side effects and event-based logic to Redux thunks within the store, and finalized the switch to a pure store-based approach.

Each PR was reviewed, tested, and merged sequentially into a dedicated feature branch, which was then merged into the main branch after the series was complete.

This approach was praised by tech leads and adopted by the team for subsequent large-scale changes, significantly reducing risk and improving code review quality.

The WordPress Data Store system (@wordpress/data) is built on Redux principles but adapted for the WordPress ecosystem. I implemented several data stores following these principles:

• Clear Separation of Concerns: Actions for state changes, selectors for data retrieval
• Immutable State Management: Ensuring predictable state updates
• Observable State: Allowing third-party plugins to subscribe to state changes
• Side-effect Management: Handling asynchronous operations in a predictable manner

This implementation provided a clean API for both internal components and external plugins to interact with, significantly improving the extensibility of the WooCommerce Blocks system.

export const config = {
  reducer,
  selectors,
  actions,
  controls: { ...dataControls, ...sharedControls }, // Combine internal and WP controls
  __experimentalUseThunks: true, // Enable async side effects (e.g., fetch)
};
 
// Create the Redux-style data store
const store = createReduxStore(STORE_KEY, config);
 
// Register the store in the global WP registry
register(store);