close

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

Hello Guys, How are you all? Hope You all Are Fine. Today I get the following error Getting an error “A non-serializable value was detected in the state” when using redux toolkit – but NOT with normal redux in javascript. So Here I am Explain to you all the possible solutions here.

Without wasting your time, Let’s start This Article to Solve This Error.

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

  1. How To Solve Getting an error “A non-serializable value was detected in the state” when using redux toolkit – but NOT with normal redux Error?

    To Solve Getting an error “A non-serializable value was detected in the state” when using redux toolkit – but NOT with normal redux Error This is more likely a problem from 'redux-persist'. 'redux-toolkit' provide few default middleware within it's 'getDefaultMiddleware'.

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

    To Solve Getting an error “A non-serializable value was detected in the state” when using redux toolkit – but NOT with normal redux Error This is more likely a problem from 'redux-persist'. 'redux-toolkit' provide few default middleware within it's 'getDefaultMiddleware'.

Solution 1

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
 })`

Solution 2

We’ve always told Redux users they should not put non-serializable values in the store. Redux Toolkit was specifically designed to help provide good defaults when setting up a Redux store, and as part of that, it includes checks to make sure you’re not accidentally mutating your data and that you’re not including non-serializable values.

Class instances are by definition not fully serializable, so it’s correctly flagging those instances as a problem. Please rewrite your logic to not pass those into the store.

In general, React and Redux apps should be written using only plain JS objects and arrays as data. You don’t need “model classes”.

Summery

It’s all About this issue. Hope all solution helped you a lot. Comment below Your thoughts and your queries. Also, Comment below which solution worked for you? Thank You.

Also Read

Leave a Comment