Steps of Migration

A comprehensive overview of the migration process from Redux Saga to Redux Toolkit in the sails-vvl-device-details-app repository.

This page outlines the step-by-step process we followed to migrate our application from Redux Saga to Redux Toolkit. Each step is crucial in ensuring a smooth transition and maintaining the functionality of our app while leveraging the benefits of Redux Toolkit.

Detailed Explanations:

Each step mentioned here will be explained in detail in later sections, with code examples and best practices.

Migration Process Overview

1

API Migration

We started by migrating our API calls, creating the Glados API and the Tradein API using Redux Toolkit's createApi.

2

Implementing the APIs

We replaced the old Saga-based API calls with the new Redux Toolkit APIs, utilizing extraReducers to handle asynchronous operations in the slice.

3

Saga to Listeners Transformation

We converted our Redux Saga effects to Redux Toolkit listeners to manage side effects.

4

Selector Updates

We updated our selectors to use the new createAppSelector for improved performance and memoization.

5

Component Structure Refactoring

We agreed on a new component structure, focusing on clarity, intuitiveness, and separation of concerns.

6

Testing

We implemented comprehensive testing for helpers, slices, listeners, and selectors.

7

Integration Testing

We ensured that Cypress tests were functioning without errors.

8

Code Review and Iteration

We conducted multiple rounds of code review to refine and optimize our migrated codebase.

Detailed Migration Checklist

API Migration
  • Create Glados API
  • Create Tradein API
  • Implement RTK Query
Saga to Listeners
  • Convert Saga effects
  • Implement listeners
  • Handle side effects
State Management
  • Update selectors
  • Implement createAppSelector
  • Optimize state structure

Each step in this migration process plays a crucial role in transitioning from Redux Saga to Redux Toolkit. In the following sections, we'll dive deep into each of these steps, providing detailed explanations, code examples, and best practices to guide you through your own migration process.