evolve-and-diagnose-redux-apps/migrate-to-modern-redux

Imported from JosepTibs/SubscriptionMonitoringSystem (node_modules copy/@reduxjs/toolkit/skills/evolve-and-diagnose-redux-apps/migrate-to-modern-redux/SKILL.md). Install upstream with npx skills add JosepTibs/SubscriptionMonitoringSystem --skill migrate-to-modern-redux. Copyright stays with the author.

Migrate To Modern Redux

Setup

// before
import { applyMiddleware, combineReducers, createStore } from 'redux'
import thunk from 'redux-thunk'

const postsReducer = (state = [] as { id: string; title: string }[]) => state
const usersReducer = (state = [] as { id: string; name: string }[]) => state

const rootReducer = combineReducers({
  posts: postsReducer,
  users: usersReducer,
})

export const legacyStore = createStore(rootReducer, applyMiddleware(thunk))

// after
import { configureStore } from '@reduxjs/toolkit'

const postsReducer = (state = [] as { id: string; title: string }[]) => state
const usersReducer = (state = [] as { id: string; name: string }[]) => state

export const store = configureStore({
  reducer: {
    posts: postsReducer,
    users: usersReducer,
  },
})

Core Patterns

Replace the store setup first

import { configureStore } from '@reduxjs/toolkit'

const postsReducer = (state = [] as { id: string; title: string }[]) => state
const usersReducer = (state = [] as { id: string; name: string }[]) => state

export const store = configureStore({
  reducer: {
    posts: postsReducer,
    users: usersReducer,
  },
})

export type RootState = ReturnType<typeof store.getState>
export type AppDispatch = typeof store.dispatch

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