non-serializable value error

[rseemann]

Hi folks 👋,

I just installed the redux-persist in a project still in its early stages and I'm facing this error message in the console as first thing when the page loads. I haven't done much besides including the lib as is, and my reducers are pretty simple for now, so I believe it has something to do with redux-persist itself?

Error:

index.js:1446 A non-serializable value was detected in an action, in the path: `register`. Value: ƒ register(key) {
    _pStore.dispatch({
      type: _constants__WEBPACK_IMPORTED_MODULE_2__["REGISTER"],
      key: key
    });
  }

Code above is followed by this message:

• Take a look at the logic that dispatched this action: {type: "persist/PERSIST", register: ƒ, rehydrate: ƒ}...
• (See https://redux.js.org/faq/actions#why-should-type-be-a-string-or-at-least-serializable-why-should-my-action-types-be-constants)

SS of the whole thing:

Could anyone help me pointing me in the right direction? It does not break the application, but the error message is there in the console.

Cheers,

[ZechyW]

Are you using redux-starter-kit? It looks like the message is caused by the included serializable-state-invariant-middleware (https://redux-starter-kit.js.org/api/getdefaultmiddleware).

As far as I can tell, passing the register and rehydrate functions in the action is central to how redux-persist currently works, but the message can be suppressed by modifying the store configuration to not include that particular middleware function.

[rseemann]

That is exactly what is going on. Further investigating I noticed this in the default middleware. I'll just remove the middleware, since it's not really essential to what I'm doing.

Cheers!

[SeedyROM]

@rseemann How exactly did you solve this? Please post your configureStore function.

[rseemann]

@SeedyROM I removed the getDefaultMiddleware from the list of middlewares. There is no real fix there, it is a problem between opinions. The serializable-state-invariant-middleware complains when it sees a non-serializable object, a function in this case, being passed as an action; redux-persist needs to do so. Sometimes you just have to pick a side 🤷‍♀️ .

Anyway, here's my configureStore.

const store = configureStore({
  reducer: rootReducer,
  middleware: [thunk, logger]
})

[SeedyROM]

@rseemann Where exactly are you getting thunk and logger from, I saw that in the documentation but I was a little bit lost. Did you manually configure them both?

Still a redux noob! Sorry!

[SeedyROM]

@rseemann I was also having issues with PersistGate never rendering, did you run into anything of the sort? I know this probably isn't the place to ask this, but I'm sleepy and desperate.

[rseemann]

@SeedyROM I'm using them as they come, no custom config.

import logger from 'redux-logger'
import thunk from 'redux-thunk'

You might have to install those yourself, although I believe redux-starter-kit will have them already, I think it is better to have more atomic dependencies.

About the PersistGate error you mentioned, I never saw this, I'm sorry. Also, don't code while sleepy, man! hahaha

[SeedyROM]

@rseemann I figured that was what was needed, but I wanted to make sure instead of battling against some configuration misunderstanding.

Yeah the PersistGate issue is strange, I'll figure it out in the morning. I don't normally do professional work this late, but dead lines my dude. lol (Don't worry, I'm quarantined in a feature branch haha)

🚀 Thanks for the help.

[acroix]

Same issue for me, redux-persist is using default redux configuration and redux-starter-kit is waiting for a string.

It would be nice to have a property into configureStore like persist: true inside redux-starter-kit and handling this error by using the immer pattern from redux-starter-kit

ty @rseemann

[markerikson]

We're not going to modify configureStore to offer options specific to redux-persist. If the serializability check is an issue, you have the ability to modify the store setup by changing the included middleware to either leave it out or customize what fields it inspects.

[sospedra]

There's a solution since redux-starter-kit@0.70

Now you can opt-out the serialization using serializableCheck attr:

import { configureStore, getDefaultMiddleware } from 'redux-starter-kit'

// ...

export const store = configureStore({
  reducer,
  middleware: getDefaultMiddleware({
    serializableCheck: false,
  }),
})

[markerikson]

Or, ignore a specific action type for the check:

export const store = configureStore({
  reducer,
  middleware: getDefaultMiddleware({
    serializableCheck: {
        ignoredActions: [someReduxPersistActionType]
    }
  }),
})