DEV Community

DEBOS DAS
DEBOS DAS

Posted on

Redux persist: https://www.npmjs.com/package/redux-persist

---

npm i redux-persist
Enter fullscreen mode Exit fullscreen mode
**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);
Enter fullscreen mode Exit fullscreen mode
{% 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>);
 %}
Enter fullscreen mode Exit fullscreen mode

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);
Enter fullscreen mode Exit fullscreen mode

Enter fullscreen mode Exit fullscreen mode

Top comments (0)