Getting an error “A non-serializable value was detected in the state” when using redux toolkit – but NOT with normal redux

This is more likely a problem from redux-persist. redux-toolkit provide few default middleware within it’s getDefaultMiddleware

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

You can disable each middleware by providing false flag. To remove serializableCheck

const customizedMiddleware = getDefaultMiddleware({
  serializableCheck: false
})

For details check redux-toolkit documentation.

[2021/10/07] edit:

To learn more about why this error happens, and why setting serializableCheck to false fixes it, read Working with Non-Serializable Data | Usage Guide redux toolkit docs.

Additionally, the getDefaultMiddleware export is being deprecated in favor of using a callback form. See Future planning: RTK 2.0? · Issue #958 · reduxjs/redux-toolkit and getDefaultMiddleware deprecated · Issue #1324 · reduxjs/redux-toolkit to learn more about why.

As to what it’s being replaced with, see the getDefaultMiddleware | Redux Toolkit documentation to learn more:

import { configureStore } from '@reduxjs/toolkit'

import rootReducer from './reducer'

const store = configureStore({
  reducer: rootReducer,
  middleware: (getDefaultMiddleware) => getDefaultMiddleware(),
})