Redux Toolkit serializableCheck configuration when migrating from legacy Redux to RTK createSlice

Answer

Keep the serializableCheck middleware active while silencing warnings for specific action types or payload shapes by customizing getDefaultMiddleware options in configureStore.

Confirmed facts

• The middleware is added by default via getDefaultMiddleware().
• It accepts a serializableCheck options object with ignoreActions (array of strings or RegExp) and ignorePaths (array of dot‑notation state or action paths).
• Ignored actions or paths only suppress console warnings; they do not alter the actions stored in Redux DevTools or the state persisted by libraries such as redux‑persist.
• When using createSlice, thunk‑generated actions can be matched with patterns like /.*\/pending/, /.*\/fulfilled/, /.*\/rejected/ (or any custom prefix) and added to ignoreActions.

Steps to configure

1. Import the needed utilities:

import { configureStore, getDefaultMiddleware } from '@reduxjs/toolkit';

2. Define the ignore lists. Example for thunk actions and a Date field in payload:

const ignoreActions = [
  /.*\/pending/,   // matches all pending thunk actions
  /.*\/fulfilled/,
  /.*\/rejected/,
  'mySlice/specificAction'   // exact action type to skip
];

const ignorePaths = [
  'payload.timestamp',   // skip checking a Date inside payload
  'state.meta'           // skip a meta slice of state
];

3. Pass the options to getDefaultMiddleware when creating the store:

const store = configureStore({
  reducer: {
    /* your reducers */
  },
  middleware: (getDefault) =>
    getDefault({
      serializableCheck: {
        ignoreActions,
        ignorePaths
      }
    })
});

4. Verify the configuration:
• Open the browser console; warnings for the ignored actions/paths should disappear.
• Dispatch a test action containing a non‑serializable value (e.g., a Date) for an action type not in ignoreActions; a warning should still appear, confirming the middleware remains active elsewhere.
• Check Redux DevTools: the ignored actions still appear in the action log and state snapshots are unchanged.
• If using redux‑persist, rehydrate the store and ensure persisted state does not contain the ignored non‑serializable values (or that you have serialized them, e.g., converting Dates to ISO strings, before dispatch).

Likely explanation

The serializableCheck middleware walks through every dispatched action and every state change, throwing a warning when it encounters non‑serializable values. By supplying ignoreActions you tell it to skip entire action types; by supplying ignorePaths you tell it to skip specific nested fields inside actions or state. This lets you keep the safety net for the rest of the application while accommodating legacy patterns that temporarily emit non‑serializable data (such as Date objects or class instances) during migration.

What to confirm

If you are using a persistence library, confirm whether the ignored values need to be serialized before persisting (e.g., convert Dates to ISO strings) to avoid storage issues. This detail does not change the configuration steps but affects whether the ignored data is safe to persist.