npm i redux-persist
**store.ts**
import { configureStore } from '@reduxjs/toolkit';
import authReducer from '../features/authSlice';
import { baseApi } from '../api/baseApi';
import { persistReducer, persistStore } from 'redux-persist';
import storage from 'redux-persist/lib/storage';
const persistConfig = {
key: 'auth',
storage,
};
const persistAuthReducer = persistReducer(persistConfig, authReducer);
export const store = configureStore({
reducer: {
[baseApi.reducerPath]: baseApi.reducer,
// auth: authReducer,
auth: persistAuthReducer,
},
middleware: (getDefaultMiddlewares) =>
getDefaultMiddlewares().concat(baseApi.middleware),
});
export type RootState = ReturnType<typeof store.getState>;
// Inferred type: {posts: PostsState, comments: CommentsState, users: UsersState}
export type AppDispatch = typeof store.dispatch;
export const persistor = persistStore(store);
{% embed <u>**main.tsx**</u>
import { Provider } from 'react-redux';
import { persistor, store } from './redux/features/store.ts';
import { PersistGate } from 'redux-persist/integration/react';
ReactDOM.createRoot(document.getElementById('root')!).render(
<React.StrictMode>
<Provider store={store}>
<PersistGate loading={null} persistor={persistor}>
<RouterProvider router={router}></RouterProvider>
</PersistGate>
</Provider>
</React.StrictMode>);
%}
To solved this error
chunk-AA2DKTG5.js?v=b2582f6e:1742 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:
Object
(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)
link
https://redux-toolkit.js.org/usage/usage-guide#use-with-react-redux-firebase
store.ts
import { configureStore } from '@reduxjs/toolkit';
import authReducer from '../features/authSlice';
import { baseApi } from '../api/baseApi';
import {
persistReducer,
persistStore,
FLUSH,
REHYDRATE,
PAUSE,
PERSIST,
PURGE,
REGISTER,
} from 'redux-persist';
import storage from 'redux-persist/lib/storage';
const persistConfig = {
key: 'auth',
storage,
};
const persistAuthReducer = persistReducer(persistConfig, authReducer);
export const store = configureStore({
reducer: {
[baseApi.reducerPath]: baseApi.reducer,
// auth: authReducer,
auth: persistAuthReducer,
},
middleware: (getDefaultMiddlewares) =>
getDefaultMiddlewares({
serializableCheck: {
ignoredActions: [
FLUSH,
REHYDRATE,
PAUSE,
PERSIST,
PURGE,
REGISTER,
],
},
}).concat(baseApi.middleware),
});
export type RootState = ReturnType<typeof store.getState>;
// Inferred type: {posts: PostsState, comments: CommentsState, users: UsersState}
export type AppDispatch = typeof store.dispatch;
export const persistor = persistStore(store);
Top comments (0)