2. How would you migrate an old Redux app to Redux Toolkit?

Question

Accepted Answer

Migrating from classic Redux to Redux Toolkit (RTK) helps simplify boilerplate, improve maintainability, and modernize state management using opinionated utilities. The migration process can be done incrementally, feature by feature, without breaking existing logic. **1. Replace createStore with configureStore:** RTK’s `configureStore` automatically sets up the Redux DevTools, middleware, and thunk integration. **2. Convert Reducers to Slices:** Use `createSlice` to combine action creators and reducers in a single file, reducing boilerplate. **3. Migrate Thunks to createAsyncThunk:** Simplify async logic using `createAsyncThunk` to manage pending, fulfilled, and rejected actions automatically. **4. Integrate RTK Query (Optional):** Replace custom API calls and manual loading/error handling with RTK Query endpoints for automatic caching and fetching. **5. Clean Up Boilerplate:** Remove manually defined constants, action creators, and switch-case reducers that are replaced by RTK utilities. // actions.js
export const increment = () => ({ type: 'INCREMENT' });

// reducer.js
const initialState = { value: 0 };
export default function counterReducer(state = initialState, action) {
  switch (action.type) {
    case 'INCREMENT':
      return { ...state, value: state.value + 1 };
    default:
      return state;
  }
}

// store.js
import { createStore } from 'redux';
import counterReducer from './reducer';
const store = createStore(counterReducer);
export default store; import { configureStore, createSlice } from '@reduxjs/toolkit';

const counterSlice = createSlice({
  name: 'counter',
  initialState: { value: 0 },
  reducers: {
    increment: (state) => { state.value += 1; }
  }
});

export const { increment } = counterSlice.actions;

export const store = configureStore({
  reducer: {
    counter: counterSlice.reducer
  }
}); By gradually introducing Redux Toolkit’s utilities, you can modernize your Redux codebase while retaining existing functionality. Start with `configureStore`, then migrate slices and async logic step-by-step to achieve a clean, maintainable architecture.

2. How would you migrate an old Redux app to Redux Toolkit?

Migrating a Legacy Redux Application to Redux Toolkit

Scenario Questions

Follow-up Questions