getting error: A non-serializable value was detected in an action
MosheAzraf opened this issue · 6 comments
MosheAzraf commented
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;