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

by

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(),
})

More Related Contents:

  1. React Context vs React Redux, when should I use each one? [closed]
  2. Understanding React-Redux and mapStateToProps()
  3. How do I access store state in React Redux?
  4. Changing the layout of a component depending on Redux state
  5. Global state in React Native
  6. Redux Presentational Components Vs Container Component
  7. How can I dispatch function in redux?
  8. Component won’t update when a redux state change occurs
  9. Could not find “store” in either the context or props of “Connect(App)”
  10. Programmatically Navigate using react-router
  11. How to dispatch a Redux action with a timeout?
  12. Why do we need middleware for async flow in Redux?
  13. How can I display a modal dialog in Redux that performs asynchronous actions?
  14. How do I test axios in Jest?
  15. How to overcome the CORS issue in ReactJS
  16. How to update single value inside specific array item in redux
  17. Why use Redux over Facebook Flux? [closed]
  18. What’s the ‘@’ (at symbol) in the Redux @connect decorator?
  19. Read Store’s Initial State in Redux Reducer
  20. How to sync Redux state and url hash tag params
  21. TypeError [ERR_INVALID_ARG_TYPE]: The “path” argument must be of type string. Received type undefined raised when starting react app
  22. Cannot update a component while rendering a different component warning
  23. Use Object.assign or Spread Operator in React/Redux? Which is a better practise
  24. Pros/cons of using redux-saga with ES6 generators vs redux-thunk with ES2017 async/await
  25. Programmatically change Redux-Form Field value
  26. Update single value in item array | react redux
  27. minimise the code since I am using the same code only the content in p tags changes and component AccordionHeader header changes
  28. On React Router, how to stay logged in state even page refresh?
  29. How do I see state when logging to the console instead of Proxy object inside reducer action?
  30. How to get simple dispatch from this.props using connect w/ Redux?

Leave a Comment