Persist not working after page reload or refresh

[kcibdev]

I was using react-toolkit but then decided to use redux-persist in order to persist my user reducer (ie my user data, like the access token and info), but when i added the redux persist and followed an online guide. t wasn't working as intended. even after reloading the page, the data still gets wiped out, Please how do i fix this issue?

I am using

"@reduxjs/toolkit": "^1.9.5",
"react-redux": "^8.1.1",
"redux-persist": "^6.0.0",
"redux-thunk": "^2.4.2",

Am using next js, react js and typescript

My store.js

import { combineReducers, configureStore, Store } from "@reduxjs/toolkit";
import thunk from "redux-thunk";
import { createWrapper, HYDRATE } from "next-redux-wrapper";
import {
  persistStore,
  FLUSH,
  REHYDRATE,
  PAUSE,
  PERSIST,
  PURGE,
  REGISTER,
} from "redux-persist";

import authReducer from "./slices/authSlice";
import teamReducer from "./slices/teamSlice";
import testimonialReducer from "./slices/testimonialSlice";
import currencyReducer from "./slices/currencySlice";
import subscriptionReducer from "./slices/subscriptionSlice";
import exchangeReducer from "./slices/exchangeSlice";
import referralReducer from "./slices/referralSlice";
import notificationReducer from "./slices/notificationSlice";
import tradeReducer from "./slices/tradeSlice";
import userReducer from "./slices/userSlice";

import storage from "redux-persist/lib/storage"; // defaults to localStorage for web
import { persistReducer } from "redux-persist";

const combineReducer = combineReducers({
  auth: authReducer,
  team: teamReducer,
  testimonial: testimonialReducer,
  currency: currencyReducer,
  subscription: subscriptionReducer,
  exchange: exchangeReducer,
  user: userReducer,
  referral: referralReducer,
  notification: notificationReducer,
  trade: tradeReducer,
});

const persistConfig = {
  key: "root",
  storage,
  whitelist: ["user"],
};

const persistedUserReducer = persistReducer(persistConfig, combineReducer);

const makeStore = () =>
  configureStore({
    reducer: persistedUserReducer,
    middleware: (getDefaultMiddleware) =>
      getDefaultMiddleware({
        serializableCheck: {
          ignoredActions: [
            FLUSH,
            REHYDRATE,
            PAUSE,
            PERSIST,
            PURGE,
            REGISTER,
            HYDRATE,
          ],
        },
      }).concat(thunk),
  });

const store = makeStore();

export const persistor = persistStore(store);

export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;

export const wrapper = createWrapper<Store>(makeStore, { debug: true });

my root app component _app.js

import type { AppProps } from "next/app";
import { Provider } from "react-redux";
import { persistor, wrapper } from "../redux/store";
import { AuthProvider } from "../context/AuthProvider";
import { PersistGate } from "redux-persist/integration/react";

export default function App({ Component, pageProps }: AppProps) {
  const { store, props } = wrapper.useWrappedStore(pageProps)
  return (
    <Provider store={store}>
      <PersistGate loading={null} persistor={persistor}>
        <AuthProvider>
          <Layout isAuthenticated={false}>
            <Component {...props.pageProps} />
           </Layout>
        </AuthProvider>
      </PersistGate>
    </Provider>
  );
}

my userSlice.js

import { createSlice } from "@reduxjs/toolkit";
import type { PayloadAction } from "@reduxjs/toolkit";
import { User } from "../../types/user";

// Interface representing the state structure of the User slice
interface UserState {
  user: User; // Data representing the user's profile
  balance: string; // User's balance as a string (could be a number, but maintained as a string for precision)
  token: string; // user access token
  isLoading?: boolean; // A flag to indicate if user-related actions are in progress
}

// Initial state for the User slice
const initialState: UserState = {
  user: {}, // Initially, there is no user data, so an empty object is used
  balance: "", // Initial balance is set to ""
  token: "", // Initial token is set to ""
  isLoading: false, // Initially, there are no loading actions, so isLoading is set to false
};

// Create the User slice using createSlice from Redux Toolkit
export const userSlice = createSlice({
  name: "user", // Name of the slice, used as the prefix for action types
  initialState, // Initial state for the slice
  reducers: {
    setUser: (state, action: PayloadAction<User>) => {
      // Reducer to update the user data when the "setUser" action is dispatched
      state.user = action.payload;
    },
    setBalance: (state, action) => {
      // Reducer to update the user's balance when the "setBalance" action is dispatched
      state.balance = action.payload;
    },
  },
  extraReducers(builder) {},
});

// Export actions from the User slice
export const { setUser, setBalance } = userSlice.actions;

// Export the reducer function for the User slice to use in the Redux store
export default userSlice.reducer;

And then this is how i set my user

const dispatch = useDispatch<AppDispatch>()

 dispatch(setUser({
          ...userData,
          access_token: data.access_token
        }))

Please can someone tell me what's wrong or what am doing wrong
Thanks

[rmed1na]

I'm facing the same issue at the moment. Pretty much same stack and versions

[samvoults]

I copied/pasted my redux implementation from a RN 0.72 project to a new RN 0.73 project and it's not working for me neither although it's working correctly on my RN 0.72 project.

[sumanth000]

im using a redux toolkit config store too.. not working for me too.. is there a bug in this new config store?

[acelyavul]

it worked after i removed whitelist, i did combined all reducers with persist ones

[Chhaiden]

it worked