Problem with 'non-serializable value'

[liranUziel]

Hello everyone, I am working on a small project with only two reducers one to store group Info (only id) and one for map Info (more complex start point, endpoint, and other data will be added later) I create my project using Vite the code is in TypeScript and uses react framework and redux-toolkit After adding redux-persist to my project I have an issue with non-serializable value for both reducers.

This is my store.ts code

import { configureStore } from "@reduxjs/toolkit";
//add the presisit
import { persistReducer, persistStore } from "redux-persist";
import storage from "redux-persist/lib/storage";

import groupInfoReducer from "../features/groupInfo/groupinfo-slice";
import mapInfoReducder from "../features/map/map-slice";

const groupInfoPersistConfig = {
  key: "groupInfo",
  storage,
};

const mapInfoPersistConfig = {
  key: "mapInfo",
  storage,
};

const persistedGroupInfoReducer = persistReducer(
  groupInfoPersistConfig,
  groupInfoReducer
);

const persistedMapInfoReducer = persistReducer(
  mapInfoPersistConfig,
  mapInfoReducder
);

export const store = configureStore({
  reducer: {
    groupInfo: persistedGroupInfoReducer,
    mapInfo: persistedMapInfoReducer,
  },
});

export const persistor = persistStore(store);

export type AppDispatch = typeof store.dispatch;
export type RootState = ReturnType<typeof store.getState>;

and this is my main.tsx

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import { Provider } from "react-redux";
import { store } from "./app/store";

import { PersistGate } from "redux-persist/integration/react";
import { persistStore } from "redux-persist";

const persistor = persistStore(store);

ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
  <React.StrictMode>
    <Provider store={store}>
      <PersistGate loading={null} persistor={persistor}>
        <App />
      </PersistGate>
    </Provider>
  </React.StrictMode>
);

I am new to redux (only my second project) and redux-persist.

[NerdPraise]

You need to also include the Thunk middleware, which will intercept and stop non-serializable values in action before they get to the reducer. You can use the resource as a guide Log rocket

[liranUziel]

You need to also include the Thunk middleware, which will intercept and stop non-serializable values in action before they get to the reducer. You can use the resource as a guide Log rocket

if i use redux-toolkit that includes redux-thunk by default it not enough?

[NerdPraise]

If you have thunk and you still have the issue, it is most likely that you didn't exclude persist action type in the middleware check for your store.

import { FLUSH, REHYDRATE,  PAUSE,  PERSIST, PURGE, REGISTER } from 'redux-persist'

const store = configureStore({
  reducer: ....,
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      serializableCheck: {
        ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER],
      },
    }),
})

This should fix the non-serializable value error. This is redux-toolkit guide on that