WooCommerce Blocks: Data Store Migration

Converting React Context to WordPress Data Stores

Key contributor to a major refactoring of WooCommerce Blocks' state management, migrating from React Context to WordPress Data Stores for improved extensibility, with innovative PR workflow for managing large-scale changes.

ReactReduxTypeScriptWordPressWooCommerce Blocks
View Contribution
Architectural diagram showing state management migration

Migration from React Context to WordPress Data Stores (@wordpress/data)

Improving Extensibility for a Critical WordPress Plugin

WooCommerce Blocks initially relied heavily on React Context for managing front-end state. While functional, this approach presented significant challenges for extensibility, making it difficult for third-party developers (e.g., payment gateway creators) to reliably access or react to crucial state changes within the blocks. This limitation hindered the ecosystem and led to support issues, such as accessing payment readiness state (canMakePayment). A major architectural refactoring was needed to improve state accessibility and align with broader WordPress development patterns.

My Role & Contributions
I joined a team of three highly proficient engineers working on this complex and sensitive migration shortly after returning from an extended break. Despite the challenge of rapidly onboarding onto an ongoing, intricate project, I quickly integrated and became a key contributor. My role combined technical implementation with process innovation to address a significant workflow challenge.
  • Core Migration Implementation: Migrated critical functionality, focusing on the PaymentMethodDataProvider
  • Collaborative Problem Solving: Engaged in technical discussions to navigate challenges like deciphering complex legacy code
  • Innovated PR Review Workflow: Identified and solved a major bottleneck in reviewing large-scale architectural changes
  • Migration Strategy: Created a stepwise approach to ensure data integrity throughout the refactoring process
  • Technical Documentation: Documented new patterns for other developers to follow in subsequent migrations
  • Cross-team Coordination: Communicated architecture changes to payment gateway developers

Key Contributions

  • Migration architecture: React Context

    Migration architecture: WordPress Data Store

  • Sequential PR workflow for large architectural changes

  • 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);

Technical Architecture & Migration Strategy

The migration from React Context to WordPress Data Stores required careful planning and execution:

✨ Highlights
  • Successfully migrated critical payment state to a more extensible architecture
  • Innovated review process for large architectural changes through sequential PRs
  • Maintained backward compatibility for third-party plugin developers
🔍 Challenges
  • Deciphering complex legacy code with intertwined state and event systems
  • Maintaining backward compatibility while completely changing the underlying architecture
  • Finding effective ways to review massive code changes without compromising quality
🛠️ Skills Demonstrated
  • React & Redux: Deep understanding of state management patterns
  • WordPress Data Stores: Working with @wordpress/data implementation
  • TypeScript: Adding type safety to a complex JavaScript codebase

Key Takeaways

  • Mastered techniques for safely refactoring large-scale state management systems
  • Developed deep understanding of WordPress data flow and extensibility patterns
  • Learned effective strategies for breaking down complex migrations into reviewable units
  • Gained experience with gradual migration patterns that maintain backward compatibility
  • Strengthened ability to quickly onboard to complex projects and contribute effectively
  • Improved collaborative development skills when working with sensitive, mission-critical code

Technologies Used

⚙️ Core Stack
  • React
  • WordPress Data (@wordpress/data)
  • Redux (architecture principles)
  • TypeScript
  • JavaScript (ES6+)
📦 Libraries
  • WooCommerce Blocks
  • WordPress Packages
  • Jest (testing)
🔧 Tools
  • GitHub
  • GitHub Actions
  • WordPress Plugin Development Tools
  • Webpack
← Back to All ProjectsContact Me