A look at Shopify’s experience improving state management in the Shopify POS app by migrating from a Vanilla Redux codebase to Redux Toolkit one.
Overview
The article discusses the migration of Shopify's Retail Point of Sale app from Vanilla Redux to Redux Toolkit (RTK), highlighting the challenges and benefits of this transition. It emphasizes the reduction of boilerplate code and the improved readability of state management, while also detailing the migration strategy and implementation process.
What You'll Learn
1
How to migrate a Vanilla Redux codebase to Redux Toolkit
2
Why using Redux Toolkit can simplify state management in React applications
3
When to consider a gradual migration strategy versus a complete rewrite
Prerequisites & Requirements
- Familiarity with Redux and React
- Experience with JavaScript and state management concepts
Key Questions Answered
What are the benefits of migrating from Vanilla Redux to Redux Toolkit?
Migrating to Redux Toolkit reduces boilerplate code significantly, improves readability, and simplifies state management. It generates action creators automatically and includes middleware, which streamlines the setup process compared to Vanilla Redux.
What migration strategy did Shopify use for their POS app?
Shopify opted for a balanced migration strategy, where most features of Redux Toolkit were adopted while retaining some complex code in its original Vanilla Redux style. This approach minimized risks and allowed for a smoother transition.
How long did the migration process take for Shopify's POS app?
The migration process from Vanilla Redux to Redux Toolkit took about three months. This gradual approach allowed for testing and rolling back changes if necessary, ensuring stability during the transition.
What challenges did Shopify face during the migration to Redux Toolkit?
Shopify encountered challenges such as TypeScript warnings and the need to adapt asynchronous logic to fit RTK's structure. They also faced issues with certain reducers that did not align with best practices, requiring additional subprojects for those cases.
Key Statistics & Figures
Lines of code removed
3,500
The migration to Redux Toolkit allowed Shopify to delete 3,500 lines of boilerplate code, significantly simplifying their codebase.
Technologies & Tools
Some links below are affiliate links. We may earn a commission if you make a purchase.
Frontend
Redux Toolkit
Used for state management in the Shopify POS app, replacing Vanilla Redux.
Tools
Typescript
Used in the project, requiring careful handling of types during the migration.
Key Actionable Insights
1Consider adopting Redux Toolkit for new and existing React projects to reduce boilerplate code and improve maintainability.Redux Toolkit simplifies state management by generating action creators and providing a more concise syntax, which can lead to faster feature development and easier debugging.
2Utilize a phased migration strategy when transitioning from Vanilla Redux to Redux Toolkit to minimize risks.A gradual approach allows teams to maintain stability in their applications while incrementally adopting new features and improvements offered by Redux Toolkit.
3Explicitly type your useDispatch, useSelector, and useStore hooks to avoid TypeScript warnings during migration.Proper typing helps catch potential issues early and ensures smoother integration with TypeScript, especially when refactoring existing code.
Common Pitfalls
1
Failing to properly type hooks like useDispatch can lead to TypeScript warnings and errors.
This often occurs when developers overlook TypeScript integration during migration, which can complicate the refactoring process and introduce bugs.
2
Not using the unwrap method on dispatch calls can lead to unexpected behavior.
Unlike Vanilla Redux, dispatch in Redux Toolkit does not return the value directly, which can confuse developers transitioning from the older version.
Related Concepts
Redux
State Management
React Native
Asynchronous Logic