Evolve And Diagnose Redux Appsmigrate To Modern Redux

This is the one migration step that can happen immediately while old reducers continue to work.

Migrate reducers as you touch them

import { createSlice } from '@reduxjs/toolkit'

type TodosState = {
  items: { id: string; text: string; completed: boolean }[]
}

const initialState: TodosState = {
  items: [],
}

export const todosSlice = createSlice({
  name: 'todos',
  initialState,
  reducers: {
    todoAdded(state, action: { payload: { id: string; text: string } }) {
      state.items.push({ ...action.payload, completed: false })
    },
    todoToggled(state, action: { payload: { id: string } }) {
      const todo = state.items.find((item) => item.id === action.payload.id)
      if (todo) {
        todo.completed = !todo.completed
      }
    },
  },
})

Once a reducer needs editing, migrate that reducer instead of adding more legacy code to it.

Use codemods for mechanical updates

npx @reduxjs/rtk-codemods createSliceBuilder src/features/posts/postsSlice.ts
npx @reduxjs/rtk-codemods createReducerBuilder src/features/posts/postsReducer.ts

Use codemods for repetitive RTK API migrations, then review the result and finish the semantic cleanup by hand.

Replace legacy server-data stacks with RTK Query

import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'

type Todo = { id: string; text: string }

export const api = createApi({
  reducerPath: 'api',
  baseQuery: fetchBaseQuery({ baseUrl: '/api/' }),
  endpoints: (build) => ({
    getTodos: build.query<Todo[], void>({
      query: () => 'todos',
    }),
  }),
})

When the old code is just request status plus fetched data, migrate toward RTK Query instead of carrying the thunk stack forward forever.

Common Mistakes

HIGH Attempting a big-bang rewrite

Wrong:

// Replace every reducer, every connected component, and every async flow
// in one branch before shipping anything.

Correct:

// 1) Switch createStore to configureStore
// 2) Migrate one touched reducer to createSlice
// 3) Convert touched connected components to hooks
// 4) Repeat without introducing new legacy Redux code

Modern Redux migration is incremental, but once the store is modernized new work should stop adding legacy patterns.

Source: reduxjs/redux-toolkit:docs/usage/migrating-to-modern-redux.mdx

CRITICAL Carrying removed RTK 2 config forms forward

Wrong:

configureStore({
  reducer,
  middleware: [logger],
})

Correct:

configureStore({
  reducer,
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware().concat(logger),
})

RTK 2 removed array middleware configuration and other older builder forms that agents trained on RTK 1.x still emit.

Source: reduxjs/redux-toolkit:docs/usage/migrating-rtk-2.md

HIGH Preserving hand-written fetch state by default

Wrong:

import { createAsyncThunk } from '@reduxjs/toolkit'

type Todo = { id: string; text: string }

const initialState = {
  items: [] as Todo[],
  status: 'idle' as 'idle' | 'pending' | 'failed',
}

export const fetchTodos = createAsyncThunk('todos/fetch', async () => {
  const response = await fetch('/api/todos')
  return (await response.json()) as Todo[]
})

Correct:

import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'

type Todo = { id: string; text: string }

const api = createApi({
  reducerPath: 'api',
  baseQuery: fetchBaseQuery({ baseUrl: '/api/' }),
  endpoints: (build) => ({
    getTodos: build.query<Todo[], void>({
      query: () => 'todos',
    }),
  }),
})

If the feature is really server cache, keep the migration moving toward RTK Query instead of rebuilding the old loading-flag architecture in new APIs.

Source: reduxjs/redux-toolkit:docs/usage/migrating-to-modern-redux.mdx