How to overcome "A non-serializable value detection"

Question

I'm implementing react app with redux-toolkit, and I get such errors when fetching data from firestore.

A non-serializable value was detected in an action, in the path: payload.0.timestamps.registeredAt

A non-serializable value was detected in an action, in the path: payload.0.profile.location.

The former's data type is firebase.firestore.Timestamp, and the latter is GeoPoint.
I think both might not be serializable, but I want to fetch those data and show them to users.
How can I overcome those errors?
According to this issue, I might write like that;

const store = configureStore({
 reducer: rootReducer,
 middleware: [
  ...getDefaultMiddleware({
  serializableCheck: {
     ignoredActionPaths: ['meta.arg', 'meta.timestamp'], // replace the left to my path
     },
  }),
  reduxWebsocketMiddleware,
 // ... your other middleware
],
});

But I'm not sure if it's safe and even if so, I don't know how to write the path dynamic way since my payload is array.

I'd really appreciate if anyone gives some clue.

user_3070407 · Answer

Check it out at

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

accordingly with Rahad Rahman answer I did the follow in store.ts:

export default configureStore({
    reducer: {
        counter: counterReducer,
        searchShoes: searchShoesReducer,
    },    
    middleware: (getDefaultMiddleware) => getDefaultMiddleware({
        serializableCheck: false
    }),
});

user_2075944 · Answer

The best way to go about this would be to convert that data into something serializable that you can safely store in your state. According to the style guide, you should not put Non-Serializable Values in State or Actions.

A good place to do that would be in a reducer prepare function.

How to overcome "A non-serializable value detection"

2 Answers