How do you migrate a legacy Redux app incrementally to RTK or a modern alternative?

Question

Accepted Answer

It is absolutely possible to migrate a production Redux application to Redux Toolkit (RTK) incrementally and safely[citation:2][citation:6]. The key principle is that legacy Redux code and modern RTK code can coexist in the same store[citation:2]. By following a step-by-step approach, you can modernize your codebase piece by piece without having to do a risky, all-at-once rewrite. The recommended path is to first modernize your store setup with `configureStore`, then one by one convert your reducers using `createSlice`, and finally update your React components. You should always start by replacing the legacy `createStore` call with RTK's `configureStore`[citation:1]. This step is crucial because it establishes the modern foundation upon which you will build incrementally. `configureStore` automatically adds essential middleware like `redux-thunk` and enables the Redux DevTools, but it's designed to be backwards-compatible—all of your existing reducers, middleware, and other code will continue to work as-is[citation:1][citation:6]. Once this is done, you can verify that your app still runs, and you're ready for the next phase. // src/app/legacyStore.js
import { createStore, applyMiddleware, combineReducers, compose } from 'redux';
import thunk from 'redux-thunk';
import postsReducer from '../reducers/postsReducer';
import usersReducer from '../reducers/usersReducer';

const rootReducer = combineReducers({ posts: postsReducer, users: usersReducer });
const composeWithDevTools = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(rootReducer, composeWithDevTools(applyMiddleware(thunk)));

export default store; // src/app/store.js
import { configureStore } from '@reduxjs/toolkit';
import postsReducer from '../features/posts/postsSlice'; // You'll convert slices like this
import usersReducer from '../reducers/usersReducer';

// The legacy reducer can be mixed with the new one
const store = configureStore({
  reducer: {
    posts: postsReducer,
    users: usersReducer
  }
});

export default store; After the store is using `configureStore`, you can begin converting your existing reducer logic. A typical legacy setup involves separate files for action types, action creators, and the reducer itself[citation:1]. You can replace these entirely with a single `slice` file that uses the `createSlice` API[citation:6]. This API combines action types, action creators, and reducer logic into one place and uses Immer to allow simpler mutable update logic[citation:1]. // src/features/todos/todosSlice.js
import { createSlice } from '@reduxjs/toolkit';

const initialState = [];

export const { todoAdded, todoToggled } = todosSlice.actions;
export default todosSlice.reducer; The legacy `connect` higher-order component can be replaced incrementally with React-Redux's modern hooks API—specifically `useSelector` and `useDispatch`[citation:1]. These hooks are not only more concise and easier to use but also work seamlessly with both your old and new reducers, allowing you to migrate your components one by one. Strongly typing your store's state and dispatch is considered a best practice, as it provides better type safety and autocompletion in your code editor[citation:1]. If you're considering moving to an entirely different state management solution like Jotai, the same principle of incremental migration applies. The approach is to keep your Redux store alongside the new state manager, building new features with Jotai and gradually moving old pieces to Jotai when they need to be changed or refactored. This distributed approach can offer a migration path away from centralised Redux to a more modern, atomic model without the risks of a 'big bang' rewrite[citation:9]. The key is that both systems can coexist in the same app.

How do you migrate a legacy Redux app incrementally to RTK or a modern alternative?

How do you migrate a legacy Redux app incrementally to RTK or a modern alternative?

Scenario Questions

Follow-up Questions