I'm currently working on integrating redux-persist with next.js using next-redux-wrapper. However, I'm facing an issue where the storage is not updating and the state is lost during page refresh.
Below is my store.ts file:
import { createStore, applyMiddleware } from 'redux';
import { createWrapper } from 'next-redux-wrapper';
import storage from 'redux-persist/lib/storage';
import rootReducer from './rootReducer';
import { createLogger } from 'redux-logger'
import { persistStore, persistReducer } from 'redux-persist';
import { composeWithDevTools } from 'redux-devtools-extension';
const logger = createLogger();
// MIDDLEWARE BINDING
const bindMiddleware = (middleware) => {
if (process.env.NODE_ENV !== 'production') {
return composeWithDevTools(applyMiddleware(...middleware));
}
return applyMiddleware(...middleware);
};
const makeStore: any = ({ isServer }) => {
if (isServer) {
//If it's on the server side, create a store
return createStore(rootReducer, bindMiddleware([logger]));
} else {
//If it's on the client side, create a store that will persist
const persistConfig = {
key: 'root',
storage,
};
const persistedReducer = persistReducer(persistConfig, rootReducer);
const store: any = createStore(
persistedReducer,
bindMiddleware([logger])
);
store.__persistor = persistStore(store);
return store;
}
};
export const wrapper = createWrapper(makeStore);
Here is my reducer.ts file:
import {
LOGOUT,
LOGIN_ERROR,
LOGIN_SUCCESS,
} from "./actionTypes";
const initialState = {
userInfo: null,
accessToken: null,
loginError: false,
loading: true,
isLoggedIn: false
};
const authReducer = (state: any = initialState, action: any) => {
switch (action.type) {
case LOGIN_SUCCESS:
state = {
...state,
userInfo: action.payload.userInfo,
accessToken: action.payload.accessToken,
loading: false,
isLoggedIn: true
}
break;
case LOGIN_ERROR:
state = {
...state
}
break;
case LOGOUT:
state = {
...state,
userInfo: null,
accessToken: null,
loginError: false,
loading: false,
isLoggedIn: false
}
console.log(state);
break;
default:
state = {
...state,
};
break;
}
return state;
};
export default authReducer;
And here is my _app.tsx file:
import type { AppProps } from "next/app";
import "../styles/reset.scss";
import Layout from "@/components/layout";
import { wrapper } from "../src/redux/store"
import { useStore } from "react-redux"
import { PersistGate } from "redux-persist/integration/react";
import { ApolloProvider } from "@apollo/client";
import { useApollo } from "../src/graphql/apollo/apollo";
import Loader from '@/components/Loader'
function MyApp({ Component, pageProps }: AppProps) {
const apolloClient = useApollo(pageProps.initialApolloState);
const store: any = useStore();
return (
<ApolloProvider client={apolloClient}>
<PersistGate persistor={store.__persistor} loading={<div>Loading</div>}>
<Layout>
<Loader />
<Component {...pageProps} />
</Layout>
</PersistGate>
</ApolloProvider>
);
}
export default wrapper.withRedux(MyApp);
Do you think there's a need to handle the persist/REHYDRATE action in the reducer file? I've noticed that when checking the persist/REHYDRATE action, the payload is undefined. What could be causing this?