getting error: A non-serializable value was detected in an action

[MosheAzraf]

hello, im using react with redux tkq and persist, im facing some error which im not sure what occurred it, what im trying to do, is to persist authSlice in order to keep user's data while refreshing, error:

A non-serializable value was detected in an action, in the path: `register`. Value: ƒ register2(key) {
    _pStore.dispatch({
      type: REGISTER,
      key
    });
  } 
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) 
(To allow non-serializable values see: https://redux-toolkit.js.org/usage/usage-guide#working-with-non-serializable-data)

here is my code, any idea what cause it ? redux store:

import { configureStore } from "@reduxjs/toolkit";
import { moviesApi } from './services/movies/moviesApi';
import { membersApi } from "./services/members/members";
import { subscriptionsApi } from "./services/subscriptions/subscriptions";
import { usersApi } from "./services/users/usersApi";
import { authApi } from "./services/auth/authApi";
import subscriptionsSlice from "./features/subscriptionsSlice";
import authReducer from "../redux/features/authSlice"
import storage from "redux-persist/lib/storage";
import persistReducer from "redux-persist/es/persistReducer";
import persistStore from "redux-persist/es/persistStore";

const persistConfig = {
    key: "auth",
    storage: storage,
}

const persistedAuthReducer = persistReducer(persistConfig, authReducer)


export const store = configureStore({
    reducer: {
        [moviesApi.reducerPath]: moviesApi.reducer,
        [membersApi.reducerPath]: membersApi.reducer,
        [subscriptionsApi.reducerPath]: subscriptionsApi.reducer,
        subInfo : subscriptionsSlice,
        [usersApi.reducerPath]: usersApi.reducer,
        [authApi.reducerPath]: authApi.reducer,
        auth: persistedAuthReducer
    },
    
    middleware: (getDefaultMiddleware) =>
        getDefaultMiddleware().concat(
            moviesApi.middleware, 
            membersApi.middleware,
            subscriptionsApi.middleware,
            usersApi.middleware,
            authApi.middleware
        ),
});

export const persistor = persistStore(store)

how i wrap it:

import { createRoot } from 'react-dom/client';
import App from './App';
import './index.css';
import { Provider } from 'react-redux';
import { store, persistor } from './redux/store.js';
import { BrowserRouter } from 'react-router-dom';
import { PersistGate } from 'redux-persist/integration/react';

const root = createRoot(document.getElementById('root'));

root.render(
  <BrowserRouter>
    <Provider store={store}>
      <PersistGate loading={null} persistor={persistor}>
        <App />
      </PersistGate>      
    </Provider>
  </BrowserRouter>
);

authSlice:

import { createSlice } from "@reduxjs/toolkit";

const initialState = { 
  user: {
    userName: "",
    userFullName: null,
    role: "",
    permissions: [],
    sessionTimeOut: null,
    token: ""
  },
  isLoading: false,
  isError: false
}

const authSlice = createSlice({
  name: 'auth',
  initialState,
  reducers: {
    setUser: (state, action) => {
      return {
        ...state,
        user: action.payload.data,
        isLoading: false,
        isError: false
      };
    },
    logout: (state) => {
      return {
        ...state,
        user: initialState.user, 
      };
    },
  }
});

export const { setUser, logout } = authSlice.actions;
export default authSlice.reducer;

authApi

import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';

const baseURL = 'http://localhost:8001/api/auth';

export const authApi = createApi({
  reducerPath: 'authApi',
  baseQuery: fetchBaseQuery({ baseUrl: baseURL }),
  endpoints: (builder) => ({
    login: builder.mutation({
      query: ({ userName, password }) => ({
        url: 'login',
        method: 'POST',
        body: {
          userName: userName,
          password: password
        }
      }),
      transformResponse: (resp) => resp.data
      
    }),
  }),
});

export const { useLoginMutation } = authApi;

[viraxslot]

Hi, I've found your issue trying to fix the same problem. I've added the changes described here (middleware part inconfigureStore) and it helped. Hope it'll help to resolve your issue too.

[hu-qi]

Hi, I've found your issue trying to fix the same problem. I've added the changes described here (middleware part inconfigureStore) and it helped. Hope it'll help to resolve your issue too.

Thanks ! Good job，it works for me！

[sourabhverma05]

Thanks !

[uvistix]

Thanks worked.

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

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

Hi, I've found your issue trying to fix the same problem. I've added the changes described here (middleware part inconfigureStore) and it helped. Hope it'll help to resolve your issue too.

[Yagth]

Hi, I've found your issue trying to fix the same problem. I've added the changes described here (middleware part inconfigureStore) and it helped. Hope it'll help to resolve your issue too.

Thanks it worked for me too!

[nrooban]

it is