store.js
import { configureStore } from "@reduxjs/toolkit";
import logger from 'redux-logger'
import storage from "redux-persist/lib/storage";
import {
persistReducer,
FLUSH,
REHYDRATE,
PAUSE,
PERSIST,
PURGE,
REGISTER,
} from "redux-persist";
import { combineReducers } from "@reduxjs/toolkit";
import auth from "./reducers/auth";
import task from "./reducers/task";
const persistConfig = {
key: 'root',
version: 1,
storage,
timeout: null,
}
const reducer = combineReducers({
auth,
task,
})
const persistedReducer = persistReducer(persistConfig, reducer);
const store = configureStore({
reducer: persistedReducer,
middleware: (getDefaultMiddleware) => getDefaultMiddleware({
serializableCheck: {
ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER],
},
}).concat([logger]),
});
export default store;
layout.js
'use client';
import "./globals.css";
import theme from '@/config/muiTheme';
import axios from "axios";
import store from "@/store/store";
import { ThemeProvider } from "@mui/material/styles";
import { ToastContainer } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";
import { Provider } from "react-redux";
import { PersistGate } from "redux-persist/integration/react";
import { persistStore } from "redux-persist";
export default function RootLayout({ children }) {
axios.defaults.baseURL = "http://localhost:5000";
let persistor = persistStore(store);
return (
<>
<html lang="en">
<head>
<title>To-Do</title>
</head>
<body>
<ToastContainer
position="bottom-center"
autoClose={4000}
hideProgressBar={false}
newestOnTop={false}
closeOnClick
rtl={false}
pauseOnFocusLoss
draggable
pauseOnHover
theme="dark"
/>
<Provider store={store}>
<PersistGate persistor={persistor}>
<ThemeProvider theme={theme}>{children}</ThemeProvider>
</PersistGate>
</Provider>
</body>
</html>
</>
);
}
authReducer
import { createSlice } from "@reduxjs/toolkit";
const authSlice = createSlice({
name: "auth",
initialState: {
user: null,
isAuthenticated: false,
accessToken: null,
loading: true,
error: null,
},
reducers: {
requestStart(state, action) {
state.loading = true;
},
loadUser(state, action) {
state.user = action.payload.user;
state.accessToken = action.payload.accessToken;
state.isAuthenticated = true;
state.loading = false;
},
logOut(state, action) {
state.user = null;
state.isAuthenticated = false;
state.accessToken = null;
state.loading = false;
state.error = null;
},
resetAuth(state, action) {
state.user = null;
state.isAuthenticated = false;
state.accessToken = null;
state.loading = false;
state.error = null;
},
requestFail(state, action) {
state.loading = false;
state.error = action.payload;
},
},
});
export default authSlice.reducer;
export const authActions = authSlice.actions;
auth action
'use client';
import store from "../store";
import axios from "axios";
import { authActions } from "../reducers/auth";
import { toast } from "react-toastify";
import Cookies from "js-cookie";
const { dispatch } = store;
export const createAccount = async (name, email, password) => {
dispatch(authActions.requestStart());
try {
const res = await axios.post(
'/api/user/',
{ name, email, password }
);
const user = res.data.user;
const accessToken = res.data.token;
if (res.status === 201) {
toast.success("User has been saved to the database");
Cookies.set("Authorization", accessToken, { expires: 5 });
dispatch(authActions.loadUser({ user, accessToken }));
} else {
toast.error("There is some Problem Try Again");
}
} catch (err) {
console.error(err);
dispatch(authActions.requestFail(err.message));
dispatch(authActions.resetAuth());
toast.error('Signup Failed');
}
};
export const login = async (email, password) => {
dispatch(authActions.requestStart());
try {
const res = await axios.post(
'/api/user/login',
{ email, password }
);
const { user, accessToken } = res.data;
if (res.status === 200) {
toast.success('User has been Logged In');
Cookies.set("Authorization", accessToken, { expires: 5 });
dispatch(authActions.loadUser({ user, accessToken }));
} else {
toast.error("There is some Problem Try Again");
}
} catch (err) {
console.error(err);
dispatch(authActions.requestFail(err.message));
dispatch(authActions.resetAuth());
toast.error('Signup Failed');
}
}
Error
redux-persist failed to create sync storage. falling back to memory storage.
[1] action persist/PERSIST @ 10:55:28.811
[1] prev state {
[1] auth: {
[1] user: null,
[1] isAuthenticated: false,
[1] accessToken: null,
[1] loading: true,
[1] error: null
[1] },
[1] task: { task: null, loading: true, error: null }
[1] }
[1] action {
[1] type: 'persist/PERSIST',
[1] register: [Function: register],
[1] rehydrate: [Function: rehydrate]
[1] }
[1] next state {
[1] auth: {
[1] user: null,
[1] isAuthenticated: false,
[1] accessToken: null,
[1] loading: true,
[1] error: null
[1] },
[1] task: { task: null, loading: true, error: null },
[1] _persist: { version: 1, rehydrated: false }
[1] }
[1] action persist/REHYDRATE @ 10:55:28.822
[1] prev state {
[1] auth: {
[1] user: null,
[1] isAuthenticated: false,
[1] accessToken: null,
[1] loading: true,
[1] error: null
[1] },
[1] task: { task: null, loading: true, error: null },
[1] _persist: { version: 1, rehydrated: false }
[1] }
[1] action {
[1] type: 'persist/REHYDRATE',
[1] payload: undefined,
[1] err: undefined,
[1] key: 'root'
[1] }
[1] next state {
[1] auth: {
[1] user: null,
[1] isAuthenticated: false,
[1] accessToken: null,
[1] loading: true,
[1] error: null
[1] },
[1] task: { task: null, loading: true, error: null },
[1] _persist: { version: 1, rehydrated: true }
[1] }
[1] ○ Compiling /not-found ...
[1] ✓ Compiled /not-found in 751ms (1140 modules)
[1] redux-persist failed to create sync storage. falling back to memory storage.
[1] action persist/PERSIST @ 10:55:29.995
[1] prev state {
[1] auth: {
[1] user: null,
[1] isAuthenticated: false,
[1] accessToken: null,
[1] loading: true,
[1] error: null
[1] },
[1] task: { task: null, loading: true, error: null }
[1] }
[1] action {
[1] type: 'persist/PERSIST',
[1] register: [Function: register],
[1] rehydrate: [Function: rehydrate]
[1] }
[1] next state {
[1] auth: {
[1] user: null,
[1] isAuthenticated: false,
[1] accessToken: null,
[1] loading: true,
[1] error: null
[1] },
[1] task: { task: null, loading: true, error: null },
[1] _persist: { version: 1, rehydrated: false }
[1] }
[1] action persist/REHYDRATE @ 10:55:30.003
[1] prev state {
[1] auth: {
[1] user: null,
[1] isAuthenticated: false,
[1] accessToken: null,
[1] loading: true,
[1] error: null
[1] },
[1] task: { task: null, loading: true, error: null },
[1] _persist: { version: 1, rehydrated: false }
[1] }
[1] action {
[1] type: 'persist/REHYDRATE',
[1] payload: undefined,
[1] err: undefined,
[1] key: 'root'
[1] }
[1] next state {
[1] auth: {
[1] user: null,
[1] isAuthenticated: false,
[1] accessToken: null,
[1] loading: true,
[1] error: null
[1] },
[1] task: { task: null, loading: true, error: null },
[1] _persist: { version: 1, rehydrated: true }
[1] }
this error occurred when I was setting up redux-persist and then i just cleared my local storage and now i am not able to solve it Please help me to solve this issue and i will also provide more code if you want
I also want to ask one more thing that is redux-persist the only option to persist the state in redux-toolkit other than localstorage
I have tried many solution from stackoverflow and non of them worked